Question

我在

上有这3列布局

CSS和HTML

＆＃13;

#content{
  width: 100%;
  padding: 0 15px 0;
  margin:0px;
}
#content-left{
  width: 20%;
  display:inline-block;
}
#content-main{
  width: 55%;
  display:inline-block;
}
#content-right{
  width: 20%;
  display:inline-block;
}

＆＃13;

<div id="content">
  <div id="content-left">
    <p>Lorem ipsum....</p>
  </div>
  <div id="content-main">
    <p>Lorem ipsum....</p>
  </div>
  <div id="content-right">
    <p>Lorem ipsum....</p>
  </div>
</div>

＆＃13;

它创建了我想要的布局，但是，我在＃content-main上遇到了问题。我不能删除＆＃34; SPACE＆＃34;在段落之上..

输出看起来像这个

| [Text here] |      SPACE SPACE SPACE SPACE SPACE         | [Text here] |
| [Text here] |      SPACE SPACE SPACE SPACE SPACE         | [Text here] |
| [Text here] |      SPACE SPACE SPACE SPACE SPACE         | [Text here] |
| [Text here] |[Text here][Text here][Text here][Text here]| [Text here] |

任何人都可以帮助我这个，我仍然是CSS的首发。

Answer 1

在CSS vertical-align: top中使用#content-main。这是一个片段

＆＃13;

 #content{
  width: 100%;
  padding: 0 15px 0;
  margin:0px;
 }
 #content-left{
  width: 20%;
  display:inline-block;
  vertical-align: top;
 }
#content-main{
 width: 55%;
 display:inline-block;
  vertical-align: top;
}
#content-right{
 width: 20%;
 display:inline-block;
  vertical-align: top;
}

＆＃13;

<div id="content">
 <div id="content-left">
  <p>Lorem ipsum....</p>
   <p>Lorem ipsum....</p>
   <p>Lorem ipsum....</p>
   <p>Lorem ipsum....</p>
   
 </div>
  <div id="content-main">
  <p>Lorem ipsum....</p>
  <p>Lorem ipsum....</p>
 </div>
 <div id="content-right">
  <p>Lorem ipsum....</p>
  <p>Lorem ipsum....</p>
  <p>Lorem ipsum....</p>
 </div>
</div>

＆＃13;

Answer 2

在样式表中添加。

*{
    margin: 0;
    padding: 0;
}

html删除未知的空格

2 个答案: