Блог

Главная - Вопросы по программированию - Проблема с макетом CSS HTML Div

Проблема с макетом CSS HTML Div

#html #css #css-float

#HTML #css #css-float

Вопрос:

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

Мой текущий код не работает с другими плавающими разделениями на странице, а нижний раздел с текстом и кнопками не отображается встроенным и вытесняет другие элементы из положения.

JSFiddle:http://jsfiddle.net/XXe4L /

Я пробовал различные перефразировки своего кода, но не могу разобраться в этом и нахожусь на том этапе, когда я начинаю рвать на себе волосы.

Я пытаюсь создать макет, подобный этому каркасу — https://wireframe.cc/UTHU1d.

Я скопировал свой последний код ниже, за вычетом нижнего div с текстом и кнопкой, потому что я не смог получить это где-либо близко к правильному.

CSS:

 .sceneItem { clear:both; display: block; margin: 0 auto; width: 100%; }
.scenePart { display: block; width: 100%; height: 360px; float: left; }
.imgLink { margin: 0; position: relative; }
.largeImage { display: block; width: 648px; height: 360px; float: left; }
.previewImage { width: 318px; height: 180px; display: block; margin-bottom: 3px; float: left; }
.previewImage a.imgLink { }
.img { display: inline; }

и HTML:

 <li class="sceneItem">

<div class="largeImage scenePart">
<a href="" class="imgLink" title="">
<img src="24361_01_01.jpg" class="img" alt=""></a>
</div>

<div class="previewImage scenePart">
<a href="" class="imgLink" title="">
<img src="24361_01_01.jpg" class="img" alt=""></a>
</div>

<div class="previewImage scenePart">
<a href="" class="imgLink" title="">
<img  src="24361_01_02.jpg" class="img" alt=""></a>
</div>

</li>

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

1. Рассматривали ли вы возможность использования уже существующей структуры макета, такой как 960.gs или skel.js ? Нет смысла изобретать велосипед, и вы могли бы создать свой макет за 5 минут.

2. Может помочь jsfiddle с соответствующими изображениями и объяснением, что с ним не так.

3. Итак. Что происходит не так? вы просто говорите нам, чего он не делает. Но не то, что он делает.

4. Почему вы используете li тег без тега list ( ul , ol )? Какой-то HTML отсутствует или просто по недосмотру?

5. оплошность — весь html / css присутствует

Ответ №1:

Я предполагаю, что если ваши значения с плавающей точкой мешают друг другу, вы могли бы попробовать создать контекст форматирования блока для ваших плавающих изображений следующим образом:

 .box {
    width:970px;
    overflow: auto;
}

При этом любые следующие элементы не будут взаимодействовать с размещенными изображениями.

Примечание: Без дополнительных элементов страницы я не могу с уверенностью сказать, в чем проблема.