我該怎麼做，把類auto_box下彼此。不能並排放置？如何將同一類的div放在彼此之下？

HTML：

<div class="auto_box"></div> 
<div class="auto_box"></div> 
<div class="auto_box"></div>

CSS：

.auto_box { 
    background: #ffffec; 
    width: 173px; 
    direction: rtl; 
    font:16px Tahoma, Arial, Helvetica, Sans-serif; 
    color: #9d9d9d; 
    text-align: right; 
    margin: 8px 5px 0; 
    padding-left: 5px; 
    padding-right: 5px; 
    float: right; 
    border-radius: 3px; 
    border: 1px solid #cdcdcd; 
}

來源

2011-07-17 user846198

Mayb如果你告訴我們你想做什麼，我們可以幫助更好。這是非常抽象的。 :) –

它在你的CSS float:right是告訴瀏覽器，以收集儘可能多的箱子上同樣的線將適合。如果你刪除它，那麼這些盒子將會相互重疊。

如果你想讓它們右對齊並且在另一個之上，你可能必須向我們展示HTML/CSS上下文的其餘部分，以便我們能夠提供建議。

來源

2011-07-17 08:39:10 jfriend00

你正在將你的盒子向右移動，所以它們會並排出現。除去float:right讓他們再次成爲塊級元素：

.auto_box { 
    background: #ffffec; 
    width: 173px; 
    direction: rtl; 
    font:16px Tahoma, Arial, Helvetica, Sans-serif; 
    color: #9d9d9d; 
    text-align: right; 
    margin: 8px 5px 0; 
    padding-left: 5px; 
    padding-right: 5px; 
    border-radius: 3px; 
    border: 1px solid #cdcdcd; 
}

如果你想他們是右對齊

，使用margin-left:auto讓他們堅持到屏幕

來源

2011-07-17 08:39:31 knittl

嘗試和去除浮動的右側：權利;從你的CSS。

來源

2011-07-17 08:40:23

downvoter走了流氓？ – knittl

我不知道你在做什麼樣的東西。對於我的想法，我會稍後使用列表和樣式，甚至導航。有用。例如，：

<ul> 
    <li><a href="">Home</a></li> 
    <li><a href="">Products</a></li> 
    <li><a href="">About</a></li> 
</ul> 

ul{ 
    list-style:none; 
    line-height:40px; 
} 
ul li{ 
    float:left; 
    display:inline-block; 
    width:150px; 
    padding:5px 20px; /* or something based upon need */ 
} 
ul li a{ 
    text-decoration:none; 
    color:/*another color*/; 
    background:/*another color*/ 
    display:block; 
} 
ul li a:hover{ 
    color:/* another color */ 
    background:/* another color */ 
}

，或者你可以把你的div在另一個div然後將它們設置在一起，這比建立風格不同勢多個div起來更容易，

來源

2011-07-17 08:46:05

對於你想達到的效果我會用一個包含分區漂浮元素右側，然後只是該div

實施例中顯示的元件塊的項目：http://jsfiddle.net/DCzwu/

HTML

<div class="right"> 
    <div class="auto_box"></div> 
    <div class="auto_box"></div> 
    <div class="auto_box"></div> 
</div>

CSS

.right 
{ 
    float:right; 
} 
.auto_box { 
    background: #ffffec; 
    width: 173px; 
    direction: rtl; 
    font:16px Tahoma, Arial, Helvetica, Sans-serif; 
    color: #9d9d9d; 
    text-align: right; 
    margin: 8px 5px 0; 
    padding-left: 5px; 
    padding-right: 5px; 
    border-radius: 3px; 
    border: 1px solid #cdcdcd; 

    height:30px; 
    display:block; 
}

來源

2011-07-17 08:57:48 Xavier

添加clear: both到.auto_box CSS

你可以保持float: right用於定位的目的，它不會是影響它

來源

2013-02-07 00:24:15 str11

你的CSS應該工作，你希望它喜歡的方式這個：

.auto_box { 
    background: #ffffec; 
    width: 173px; 
    direction: rtl; 
    font:16px Tahoma, Arial, Helvetica, Sans-serif; 
    color: #9d9d9d; 
    text-align: right; 
    margin: 8px 5px 0; 
    padding-left: 5px; 
    padding-right: 5px; 
    float: right; 
    clear: both; 
    display: block; 
    border-radius: 3px; 
    border: 1px solid #cdcdcd; 
}

來源

2013-05-21 07:08:17 gersande

如何將同一類的div放在彼此之下？

回答

CSS

相關問題