的HTML

Question

我该如何将类auto_box放在彼此之下。没有并排？

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;
}

Answer 1

你把你的盒子向右漂浮，所以它们会并排出现。删除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将它们固定在屏幕的右侧

Answer 2

对于你正在尝试实现的效果，我将使用包含div来向右浮动元素，然后只将元素显示为该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;
}

Answer 3

我不知道你在做什么样的事情。根据我的想法，我会使用列表并在以后设置样式，甚至导航。有用。例如，：

<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设置样式更容易，

Answer 4

CSS中的float:right告诉浏览器在同一行上收集尽可能多的框。如果你删除它，框将相互重叠。

如果您希望它们在右对齐并且彼此重叠，您可能必须向我们展示HTML / CSS上下文的其余部分，以便我们就此提供建议。

Answer 5

尝试并删除float：right;来自你的CSS。

Answer 6

将clear: both添加到.auto_box css

您可以保留float: right用于定位目的，它不会影响它

Answer 7

你的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;
}

如何将同类的div放在一起？

7 个答案:

的HTML

的CSS