浮動html div的對齊問題

Question

我在HTML網頁中創建了兩個div，如下所示：

<div style="float:left">image here</div>
<div style="float:right">small images and medium size text content here</div>

我打算做的是這兩個div左右對齊。 但是問題是每個div占用的是容器寬度的一半，結果是左側div的右側和右側div之前有一些空間，通常右側div從容器寬度的中間開始。

我希望右側div內容位於左div的右邊，沒有空格，但是沒有出現。 所以問題仍然沒有被谷歌大師解決。

我采取的一種方法是，從這兩個div中都刪除了float樣式，並為圖像賦予了float:left樣式，並且圖像出現在左側，內容出現在右側（右側div內容）是一件好事，但是問題是當內容較大時在那兒，內容也從我不想要的右側開始在圖像下方。

Answer 1

嘗試這個：

<div style="float:left">image here</div>
<div >small images and medium size text content here</div>

Answer 2

檢查div是否由於父標記而設置了邊距或填充。 如果確實通過將以下樣式指定給div標簽將其刪除

style="padding: 0px !important;"

要么

style="margin: 0px !important;"

您還可以按百分比為div指定特定寬度，例如style="width: 30%;"

在此之后，請為兩個div並排指定float: left樣式。

Answer 3

大概是這樣嗎？

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        html, body { padding: 0; margin: 0; }
        .clearfix:after { content:""; display:table; clear:both; }
        .clearfix > div { box-sizing: border-box; border: 1px solid red; width: 50%; vertical-align:top }
    </style>
</head>

<body>
<div>
    <div class="wall-data clearfix">

        <div style="float:left;">
            <a href="http://facebook.com" target="_blank" class="wall-media-link">
            <img class="wall-picture" src="http://localhost/joomla_ext/modules/mod_mymodule/tmpl/images/picture.jpg" /></a>
        </div>

        <div style="float:right">
            <a href="https://www.facebook.com/" target="_blank" >
                <img  class="wall-avatar" src="http://localhost/joomla_ext/modules/mod_mymodule/tmpl/images/profile.png" /> </a>
            <a href="https://www.facebook.com/" class="wall-message-from" target="_blank">Name Here</a>

            <div>Ten-year-old Charlotte  Ten-year-old Charlotte  Ten-year-old Charlotte  Ten-year-old Charlotte  Ten-year-old Charlotte Ten-year-old Charlotte  Ten-year-old Charlotte  Ten-year-old Charlotte  Ten-year-old Charlotte Ten-year-old Charlotte  Ten-year-old Charlotte  Ten-year-old Charlotte Ten-year-old Charlotte  Ten-year-old Charlotte  Ten-year-old Charlotte Ten-year-old Charlotte  Ten-year-old Charlotte Ten-year-old Charlotte  Ten-year-old Charlotte  Ten-year-old Charlotte Ten-year-old Charlotte  Ten-year-old Charlotte  Ten-year-old Charlotte Ten-year-old Charlotte  Ten-year-old Charlotte  Ten-year-old Charlotte  Ten-year-old Charlotte  Ten-year-old Charlotte  Ten-year-old Charlotte Ten-year-old Charlotte  Ten-year-old Charlotte  Ten-year-old Charlotte Ten-year-old Charlotte  Ten-year-old Charlotte  Ten-year-old Charlotte Ten-year-old Charlotte  Ten-year-old Charlotte  Ten-year-old Charlotte  Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old CharlotteTen-year-old Charlotte Ten-year-old CharlotteTen-year-old Charlotte    </div>
        </div>

    </div>

</div>
</body>
</html>

Answer 4

當Element float ，它會脫離正常的文檔流，將其自身懸浮在您嘗試float:left;的方向上float:left; 或float:right; 。如果您使用的是塊級元素，如<div>和之前存在另一個塊級元素的<div>那么你的float編元素會做像往常一樣，在創建塊級元素，它之前之后的換行符您<div> 。如果float編元素是另一個元素的含量（相對於正常的塊級規則和內容元素內float ）的父元素包裝到你的對面內float ，而你什么float編推動本身一路沿float方向與父元素的填充相對。 因此， float填充，邊框和邊距。 另外，您應該知道height不包括填充，邊框或邊距。 您需要考慮它們，直到CSS3的box-sizing變得廣泛為止。 您應該使用CSS而不是HTML樣式屬性。

Answer 5

我的建議是設置div高度。如果高度相同，則不會下降到左側div。

<html>
<div style="float:left;border:1px solid black;height:300px">small images and medium size text content here</div>
<div style="border:1px solid black;height:300px">image hereawef<br/>image hereawef<br/>image hereawef<br/>image hereawef<br/>image hereawef<br/>image hereawef<br/>image hereawef<br/>image hereawef<br/>image hereawef<br/>image hereawef<br/>image hereawef<br/>image hereawef<br/>image hereawef<br/>image hereawef<br/>image hereawef<br/>image hereawef<br/></div>
</html>

Answer 6

編輯了JSfiddle： http ： //jsfiddle.net/mn9e3ytL/1/

您需要在文本前關閉div。

<img class="wall-picture" src="http://localhost/joomla_ext/modules/mod_mymodule/tmpl/images/picture.jpg" /> </a>
</DIV>
<div style="float:right">

<a href="https://www.facebook.com/" target="_blank" >

浮動html div的對齊問題

問題描述

6 個解決方案

解決方案1
0 2014-10-06 00:47:09

解決方案2
0 2014-10-06 00:50:33

解決方案3
0 2014-10-06 00:50:51

解決方案4
0 2014-10-06 02:14:03

解決方案5
0 2014-10-06 02:15:56

解決方案6
0 2014-10-06 21:38:34

浮動html div的對齊問題

問題描述

6 個解決方案

解決方案1 0 2014-10-06 00:47:09

解決方案2 0 2014-10-06 00:50:33

解決方案3 0 2014-10-06 00:50:51

解決方案4 0 2014-10-06 02:14:03

解決方案5 0 2014-10-06 02:15:56

解決方案6 0 2014-10-06 21:38:34

解決方案1
0 2014-10-06 00:47:09

解決方案2
0 2014-10-06 00:50:33

解決方案3
0 2014-10-06 00:50:51

解決方案4
0 2014-10-06 02:14:03

解決方案5
0 2014-10-06 02:15:56

解決方案6
0 2014-10-06 21:38:34