如何對齊div元素？

Question

我正在嘗試在產品詳細信息上創建一個jsp頁面。 我對CSS有點陌生，因此無法將div元素並排對齊。

 .nav { float: right; } * { margin: 0; padding: 0; } body { background-color: #F2EEE9; font: normal 13px/1.5 Georgia, Serif; color: #333; } .item { background-color: #fff; position: relative; margin: 30px auto 30px auto; width: 978px; } .item img { display: block; margin: auto; } 

 <div class="item"> <div style="background: url(http://placehold.it/370x330); height: 370px; width: 330px;"></div> <div class="pdetails"> </div> </div> 

我想在圖像框的右側添加一個div元素，但無法執行此操作。

Answer 1

在div中使用style="display:inline-block" 。

這是因為<div>默認情況下是塊元素，因此它們將占據頁面上的整個行。 使用display:inline-block將使其在同一條線上對齊，因此其行為類似於inline元素，但保留其block元素的屬性。

閱讀有關Css中display properties更多信息。

編輯：根據問題添加以下樣式（虛擬值會相應更改）：

對於包含圖片的div：

display: inline-block

.pdetails {
  height: 370px;
  width: 330px;
  display: inline-block;
}

看截圖：

Answer 2

<div class="item">
  <div style="background: url(<%=request.getParameter("img")%>); height: 370px; width: 330px; display:inline-block">
  </div>
</div>

Answer 3

float ：float屬性指定盒子（元素）是否應該浮動。

注意：絕對定位的元素將忽略float屬性！

浮點數：none | left | right | initial | inherit;

Clear： clear屬性指定元素的哪一側不允許浮動元素浮動

CSS語法：

清除：無|左|右|兩者|初始|繼承；

<div id="wrapper">
        <div id="leftcolumn">
            Left
        </div>
        <div id="rightcolumn">
            Right
        </div>
    </div>

CSS

 body {
        background-color: #444;
        margin: 0;
    }

    #wrapper {
         width: 1005px;
         margin: 0 auto;
    }
    #leftcolumn, #rightcolumn {
        border: 1px solid white;
        float: left;
        min-height: 450px;
        color: white;
    }
    #leftcolumn {
         width: 250px;
         background-color: #111;
    }

    #rightcolumn {
         width: 750px;
         background-color: #777;
    }

http://jsfiddle.net/8weSA/1/

Answer 4

您可以簡單地使兩個元素都向左浮動，就像我在示例中所做的那樣，或者通過inline和inline-block等其他方式。

 .fleft{float:left} 

 <img class='fleft' src='http://cdn2.expertreviews.co.uk/sites/expertreviews/files/0/69//nexus_6_0134.jpg?itok=lYrhMv6H' height='200px'> <div class='fright title'>Nexus 6</div> 

Answer 5

非常簡單。 只需使用：

HTML：

<div class="left-align">
..your left item..
</div>

<div class="right-align">
    ...your right item..
    </div>

CSS：

left-align{
float:left;
width:50%;
}

您只需要給左邊的項目加上“ float：left”，因為通常右邊的項目取決於您左邊項目的寬度和其float屬性。