Question

我的系统左侧有一个侧边栏，右侧有一个主内容区域。当我向侧边栏添加一些p标签时，它会将整个内容区域向下移动几行。我希望侧边栏和内容区域保持一致。

JsFiddle：http://jsfiddle.net/t60Lk8ra/1/ （它没有正确显示所有内容，但你可以看到问题，两个条需要对齐）

代码：

HTML：

<body>
<div class="left">
   sidebar1

    <p class="set">placeholder</p>

    <p class="set">placeholder</p>

    <p class="set">placeholder</p>

    <p class="set">placeholder</p>

    <p class="set">placeholder</p>
</div>

<div class="right">
    sidebar2
</div>
</body>

CSS：

div.left{
width:20%;
height:98%;
background-color: #787F6C;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 1%;
margin-right: 1%;
display : inline-block;

}
div.right{
width:75%;
margin-right: 1%;
height:98%;
background-color: white;

display : inline-block;
}

.set{
width: 92%;
margin-top: 3%;
margin-left: 5%;
margin-right: 5%;
height: 20px;
display: inline-block;
background-color: #D5F4C8;

}
body{
    background: #D5F4C8;
    margin:0;
}

先谢谢！

Answer 1

使用float

float:left;

应该有效

Answer 2

只需添加vertical-align: top，这样您就不必依赖浮点数了：

div.right {
  vertical-align: top;
  ...
}

Answer 3

float 和 align 两者都有效，但是css也需要稍微调整一下，以便与排水沟和水槽均匀对齐。边距。

HTML

<body>
  <div class="left">sidebar1
    <p class="set">placeholder</p>
    <p class="set">placeholder</p>
    <p class="set">placeholder</p>
    <p class="set">placeholder</p>
    <p class="set">placeholder</p>
  </div>
  <div class="right">sidebar2
    <p class="set">placeholder</p>
  </div>
</body>

CSS

div.left {
float: left;
width:20%;
background-color: #787F6C;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 1%;
display : inline-block;
}
div.right {
float: right;
width:75%;
background-color: #ffffff;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 1%;
display : inline-block;
}
.set {
width: 92%;
margin-top: 10px;
margin-left: 5%;
margin-right: 5%;
height: 20px;
display: inline-block;
background-color: #D5F4C8;
}
body {
background: #D5F4C8;
margin:0;
}

HTML边栏标签向下移动主要内容区域

3 个答案: