我试图让我的 div 并排放置，这样第一个和第二个就可以并排放置，依此类推。
我似乎无法让它看起来像那样。
这是我的 HTML 代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>USS Vaja 4</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
p
{
color: rgb(100,40,15);
font-size: 16px;
text-indent: 35px;
font-family: verdana;
}
</style>
</head>
<body>
<h1 style="color:#A05E03;text-transform:uppercase;">Lorem ipsum</h1>
<div id="nav">
<ul>
<li><a href="http://uss.feri.um.si/">USS</a></li>
<li><a href="http://feri.um.si/">FERI</a></li>
<li><a href="https://dk.um.si/">DKUM</a></li>
</ul>
</div>
<div id="vsebina">
<div id="slika"></div>
<div id="prvi" class="vrh">
<h2>Odstavek 1</h2>
<p>Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea <span class="commodo">commodo</span> consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="drugi" class="vrh">
<h2>Odstavek 2</h2>
<p><span class="lorem">Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea <span class="commodo">commodo</span> consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="tretji" class="dno">
<h2>Odstavek 3</h2>
<p><span class="lorem">Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea <span class="commodo">commodo</span> consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="cetrti" class="dno">
<h2>Odstavek 4</h2>
<p><span class="lorem">Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea <span class="commodo">commodo</span> consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="peti" class="dno">
<h2>Odstavek 5</h2>
<p><span class="lorem">Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea <span class="commodo">commodo</span> consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p><span class="lorem">Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea <span class="commodo">commodo</span> consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="sesti" class="dno">
<h2>Odstavek 6</h2>
<p><span class="lorem">Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea <span class="commodo">commodo</span> consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p><span class="lorem">Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea <span class="commodo">commodo</span> consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</body>
</html>
这是我的 CSS 文件:
h2
{
background-color:DarkOrange;
font-family:arial;
font-variant:small-caps;
font-weight:bold;
padding:0px 0px 0px 22px;
font-size:20px;
color:white;
}
ul
{
list-style:url('pika.png');
}
.commodo
{
font-weight:bold;
font-style:oblique;
}
#prvi
{
text-align:justify;
}
#drugi
{
text-align:center;
}
a:link
{
color:#B96600;
text-decoration:none;
font-size:18px;
}
a:visited
{
color:#B96600;
text-decoration:none;
font-size:18px;
}
a:hover
{
color:red;
text-decoration:underline;
font-size:18px;
}
a:active
{
color:#B96600;
text-decoration:none;
font-size:18px;
}
div
{
width:300px;
margin:0px 20px 0px 20px;
padding:5px 10px 0px 10px;
}
div#prvi, div#drugi
{
border:4px dashed silver;
height: 220px;
}
div#prvi>p, div#drugi>p
{
height:150px;
overflow:scroll;
}
#prvi
{
float: left;
}
#drugi
{
float: left;
}
#tretji
{
float: left;
clear: left;
}
#cetrti
{
float: left;
}
#peti
{
float: left;
clear: left;
}
#sesti
{
float: left;
}
我怎样才能让它发挥作用？
最佳答案
在这里查看 super 简单的解决方案。 http://learnlayout.com/inline-block.html
关于html - 如何正确输入 css float？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33710155/