it-swarm.com.ru

HTML CSS div с плавающей слева идет внизу, под div с плавающей справа?

Я надеюсь, что кто-то может мне помочь: у меня есть контейнер левой колонки # left-column, с плавающей точкой: left; и некоторые элементы (слайд-шоу, изображения, текст), плавающие справа. Все помещается в основной контейнер, значение ширины которого составляет 990 пикселей; Левая колонка имеет размер 240 пикселей, в то время как все элементы справа имеют ширину, достаточную для размещения справа (720 пикселей). Вот график того, что происходит:

Что я могу сделать, чтобы решить эту проблему? Я думаю, что есть что-то делать с Div слайд-шоу ...

Left column floats to left; all the other elements (slideshow, images, text) are floating to the right. The left column goes under the slideshow for some reason...

#main-container {
    width:990px;
    margin:8px auto;
}
#left-column {
    width:240px;
    float:left;
}
#slideshow {
    float:right;
    width:720px;
    height:300px;
}
a.image {
    float: right;
    display:inline-block;
}
.text {
    float:right;
    width:720px;
}

Что я должен делать ? Большое спасибо...!!

РЕДАКТИРОВАТЬ - Когда я помещаю позицию: asbolute в контейнер левой колонки, она идет прямо вверх, что выглядит хорошо, но это не то решение, которое я ищу.

5
mlclm

Спасибо всем, кто дал мне несколько советов и подсказок, чтобы решить мою проблему. После возни с abit в коде я обнаружил, что размещение левого столбца ДО слайд-шоу было решением. Что-то я пропустил: контейнер слайд-шоу был после левого столбца ... По сути, порядок вещей на странице был неправильным. Поскольку этот html-код выдан некоторым PHP, сначала я его не видел, также извините, но вряд ли смог опубликовать весь html-код, спасибо всем, хотя я действительно ценил ваши ответы, которые пытались помочь.

1
mlclm

Трудно понять конкретно для вашего контекста без HTML, но вот глобальная идея: вам обычно не нужно ставить float: left; для левого столбца и float: right; для правого столбца, даже если это кажется логичным для вас.

Более простым и надежным способом было бы поместить все ваши элементы, которые будут рядом друг с другом в float: left; (так, чтобы правый столбец был плавающим влево, рядом с левым столбцом)

С вашим изображением я бы сделал что-то вроде этого:

<div id="leftColumn">
</div>
<div id="rightColumn">
    <div id="slideshow"></div>
    <div id="imgWrapper">
        <div class="imgDiv"></div>
        <div class="imgDiv"></div>
    </div>
    <div id="text"></div>
</div>


#leftColumn {
    float: left;
    overflow: hidden;
}

#rightColumn {
    float: left;
    overflow: hidden;
}

.imgDiv {
    float: left;
    overflow: hidden;
}

#imgWrapper { overflow: hidden; }
2
Jérémy Dutheil

Попробуйте разделить основную оболочку на 2 столбца, как это. (я добавляю нижний колонтитул, если он понадобится позже)

Codepen

затем просто положите другой div внутри

<div id="main-container">
 <div id="left-column">left-column</div> 

 <div id="right-column">right-column</div> 


 <div id="footer">footer</div> 


</div>

и для CSS

#main-container {
    width:990px;
    background-color: #3d3d3d;
}
#left-column {
    width:240px;
    float:left;
  height:300px;
  background-color: red;
  margin-left: 15px;
}
#right-column {
    width:720px;
    height:300px;
      float:left;
    background-color: green;
}
#footer {
    clear: both;
    width:990px;
    height:50px;
  background-color: orange;
}
1
Wrostran

Проверьте поля как в # левом столбце, так и в #slideshow. Ширина элемента учитывает только границы и отступы. Ваша общая ширина составляет 990 пикселей. # left-column - 240px, а #slideshow - 720px. 240 + 720 - это 960 пикселей. Таким образом, если у вас больше 30 пикселей поля, один из элементов должен сместиться вниз.

1
zsaat14

Либо установить

vertical-align:top; //to left column `#left-column`

Или же

Попробуйте уменьшить ширину #slideshow

убедитесь, что вы ясно указали плавающее divs

0
Dhaval Marthak

используйте минус на полях для # left-column со значением вашей высоты #slidshow

0
Godinall