Question

我无法弄清楚为什么会这样做

这是css

.logo{
position:relative;
height:200px;
width:200px;
border-style:solid;
border-width:1px;
float:left;
padding:0px;

}

.feed{
position:absolute;
height:200px;
width: 100%;
border-style:solid;
border-width:1px;
overflow: auto;
white-space:nowrap;
padding:0px;
margin:0px;

}


.feed-box {
position:relative;
width: 550px;
height: 200px;
display:inline-block;
border-style:solid;
border-width:1px;
padding:0px;
margin:0px;
white-space:normal;
top:10px;


}

这是html

<body>

<div class="feed">

        <div class="feed-box"  >

        </div>

        <div class="feed-box"  >
          grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe
        </div>

        <div class="feed-box"  >
          grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe
        </div>

        <div class="feed-box"  >
          grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe
        </div>

        <div class="feed-box"  >
          grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe
        </div>



</div>




</body>

我不知道如何解释这个，所以这里有一个链接

http://jsfiddle.net/G5YZ6/300/

为什么div没有对齐但是正在下降。我想要的是这样的事情

<body>

<div class="feed">

        <div class="feed-box"  >
                      grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe
        </div>

        <div class="feed-box"  >
          grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe
        </div>

        <div class="feed-box"  >
          grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe
        </div>

        <div class="feed-box"  >
          grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe
        </div>

        <div class="feed-box"  >
          grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe grefewfgewfgewgwe
        </div>



</div>




</body>

http://jsfiddle.net/G5YZ6/301/

但是有些原因如果我没有相同数量的文字那么一切都会出错

Answer 1

您需要将vertical-align:top添加到.feed-box：

jsFiddle example

Answer 2

从CSS中的whitespace: normal;移除.feed-box{}。这是不必要的，并为您的代码做一些奇怪的事情。替换它overflow: auto;

为什么我的div渲染错误，因为没有对齐

2 个答案: