Блог

Главная - Вопросы по программированию - Пример размещения CSS (заголовок, изображение, текст и ссылка для дополнительной информации)

Пример размещения CSS (заголовок, изображение, текст и ссылка для дополнительной информации)

#css #html #slice

#css #HTML #срез

Вопрос:

Допустим, у меня есть следующий дизайн для нарезки:

введите описание изображения здесь

Как я могу нарезать его, НЕ используя абсолютное размещение divs и не используя макеты таблиц (если их вообще можно назвать макетами :))?

Ответ №1:

Я думаю, что это будет что-то вроде этого jsFiddle:

http://jsfiddle.net/cFqDX/

 <html>
    <body>
        <div class="mainbody">
            <h1>Some title</h1>
            <img src="http://i.stack.imgur.com/u8Wbq.png" class="leftimage"/>
            <p>
                Putting a lot of text here.
                Putting a lot of text here.
                Putting a lot of text here.
                Putting a lot of text here.Putting a lot of text here.
                Putting a lot of text here.
                Putting a lot of text here.
                Putting a lot of text here.
                Putting a lot of text here.
            </p>
        </div>
    </body>
</html>

И для css.

 .mainbody
{
    background-color:gray;
    width:800px;
    height:300px;
}

.leftimage
{
    margin:10px;
    float:left;
}

Это дает мне следующее изображение:
введите описание изображения здесь

Ответ №2:

Вы можете float: left либо сделать div вокруг текста, который вы даете display: inline-block .

Комментарии:

1. Вторая версия с display: inline-block не работает: (

2. О, вторая версия работает, если я плаваю слева от изображения! Спасибо!

3. Это должно быть, если изображение само по себе. Если изображение находится в самом блоке, в этом блоке display: inline также должно быть inline-block или. Но если это не сработает для вас, всегда есть значение с плавающей точкой. 🙂

Ответ №3:

Сделайте два div. Левый, содержащий изображение, float: left и тот, что справа float: right . Таким образом, у вас будет два «столбца» рядом друг с другом.

Но в принципе есть бесконечные решения для этого….

Комментарии:

1. Снова div для каждого текстового блока и используйте опцию float.

2. Пожалуйста, будьте более конкретны. Как я должен создать центральный столбец? Левый и правый столбцы чисты, просто будут плавать вправо или влево. Так что насчет центра??

3. Центральный столбец не должен быть плавающим. Проверьте этот JSfiddle, который я сделал, чтобы объяснить свою точку зрения: jsfiddle.net/MUpmD

Ответ №4:

Я создал здесь jsfiddle, который, как я ожидаю, будет хорошо работать в разных браузерах и довольно прост в обслуживании.

Комментарии:

1. Спасибо, но почему вы используете overflow: auto; для class .product?

2. Удалите его и посмотрите, что произойдет 🙂

3. Удалено! Ничего не происходит :))! Кстати, я тоже нажал кнопку ОБНОВЛЕНИЯ!

4. Странно, это должно привести к тому, что изображение в первом блоке будет перекрывать .product div из-за того, что .product div игнорирует плавающие элементы. Я использую это как своего рода «clearfix», а не помещаю семантически бесполезный элемент в контейнер. РЕДАКТИРОВАТЬ: Вау, ты прав. Я забежал вперед, ха-ха. Похоже, это не нужно.

Метки: