html - CSS Float 导致中间空白

Question

我有一个任务，我必须创建一个如下所示的网站:

example site

到目前为止我已经创建了这个: 我无法删除两个 div 之间的空白区域。我使用 float:left 和 float: right

这是CSS代码:

#Vsebina {
width:auto;
position: relative;
left: 200px;
top: -22px;
}


#Vsebina #Prvi.Vrh, #Drugi.Vrh, #Tretji.Dno, #Cetrti.Dno, #Peti.Dno,     #Sesti.Dno {
width: 400px;
margin-left: 20px;
margin-right: 20px;
padding-left: 30px;
padding-right: 30px;
padding-top: 5px;
}

#Vsebina #Prvi.Vrh, #Drugi.Vrh {
border: 2px;
border-style: dashed;
border-color: red;
max-height: 200px;

}

#Vsebina #Prvi.Vrh p, #Drugi.Vrh p{
height: 140px;
overflow-y: scroll;
}

#Vsebina #Drugi.Vrh, #Cetrti.Dno, #Sesti.Dno {
float: right;
}


#Vsebina #Prvi.Vrh, #Tretji.Dno, #Peti.Dno {
float:left;
}

HTML 是正常布局，我没有在 HTML 中做任何样式设置，只有内容在那里。该文件也太宽了，所以它可以垂直滚动，这也是我想摆脱的。谢谢。

Answer 1

向左浮动将内容拉到其父 div 的左侧，向右浮动将内容拉到其父 div 的右侧。

从 css 代码来看，你只需要向左应用 float 。删除右浮动以获得所需的结果。

-谢谢