Question

我在DIV中有几个DIV。我希望他们水平坐在一起，但无论我做什么，他们都会保持垂直。

代码：

<style>

#entrycontainer {
    height:100px;
    width:500px;
}
#entry {
    height:100px;
    width:200px;
}
</style>

      <div id="entrycontainer" >

          <div id="entry" >
          <h1>PHP File Upload/Browser</h1>
          <img src="img/projectimg/fileupimg.png" />
          <p>PHP MySQL CSS</p>
          </div>

          <div id="entry"  >
          <h1>PHP File Upload/Browser</h1>
          <img src="img/projectimg/fileupimg.png" />
          <p>PHP MySQL CSS</p>
          </div>

    </div>

Answer 1

将float:left;添加到您的入口类应该看起来像这样注意您应该像我在#entry到.entry的代码中那样更改并更改它们以引用类。正确使用类是在任何时候在同一页面上设置多个元素，它应该被设置为一个类。

<style type="text/css">

#entrycontainer {
    height:100px;
    width:500px;
}
.entry {
    float: left;
    height:100px;
    width:200px;
}
</style>

      <div id="entrycontainer" >

          <div class="entry" >
          <h1>PHP File Upload/Browser</h1>
          <img src="img/projectimg/fileupimg.png" />
          <p>PHP MySQL CSS</p>
          </div>

          <div class="entry"  >
          <h1>PHP File Upload/Browser</h1>
          <img src="img/projectimg/fileupimg.png" />
          <p>PHP MySQL CSS</p>
          </div>

    </div>

Answer 2

您有两个具有相同id的元素。 id属性是唯一，这意味着它用于引用单个元素。如果要将元素组合在一起，请使用class，因为它可以多次使用。

至于修复，float: left元素。 div元素为block个，因此它们不会保持内联。另请注意父元素中的overflow: auto语句。这用于说明float s。

演示：http://jsfiddle.net/g9bgV/1/

Answer 3

你不能（或者不应该）有两个具有相同ID的div;一件事。其次，div是块元素，这意味着除非您使用样式更改行为，否则它们将始终显示在新行上。

将CSS更改为：

.entry {
    height:100px;
    width:200px;
    float:left;
}

并将您的HTML更改为：

      <div id="1" class="entry" >
      <h1>PHP File Upload/Browser</h1>
      <img src="img/projectimg/fileupimg.png" />
      <p>PHP MySQL CSS</p>
      </div>

      <div id="2" class="entry"  >
      <h1>PHP File Upload/Browser</h1>
      <img src="img/projectimg/fileupimg.png" />
      <p>PHP MySQL CSS</p>
      </div>

这应该足以让你朝着正确的方向前进。

Answer 4

你需要浮动内部div。
您还需要使用一个类，因为id在页面上应该是唯一的。

.entry { 向左飘浮; 宽度：200px; 身高：100px; }

Answer 5

div是块级元素，这意味着它们将始终位于前一个内容之下（与内联元素相反，如span）

你可以添加float：left;两个块
或在容器上使用display：table，并在内部块上显示：table-cell

DIV放置的CSS问题

5 个答案: