Question

我试图让我的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;
}

我怎样才能让它发挥作用？

Answer 1

在这里查看一个超级简单的解决方案。 http://learnlayout.com/inline-block.html

Answer 2

您可以使用以下内容：

.myDiv1{
float:left;
}
.myDiv2{
float:left;
}

我怎样才能正确输入css float？

2 个答案: