Question

我正在研究响应式网页设计，但遇到了一个小问题。我有一个<aside>和一个<section>并排。我希望旁边的尺寸和尺寸相同，以自动占据宽度的其余部分。这可能吗？

这是代码。

<!DOCTYPE html>
<html>    
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    <head>

    <body>
        <aside id="sidebar">text</aside>

        <section id="main">main section</section>
    </body>
</html>

这是css。

*{
  margin: 0px;
  padding: 0px;
}

#main{
  display: inline-block;
  vertical-align: top;
  background-color: red;

  margin: -4px;
}

aside{
  display: inline-block;
  vertical-align: top;
  width: 200px;
  height: 100%;
  margin: -4px;
  background-color: blue;
}

这是jsfiddle。 https://jsfiddle.net/ehftnp3u/

Answer 1

使用flex

＆＃13;

#container .row {
  display: flex;
}
#container aside {
  width: 150px;
}
#container section {
  flex: 1;
}
#main{
  background-color: red;
}

＆＃13;

<div id="container">
  <div class="row">
    <aside>
      <span>sidebar</span>
    </aside>
    <section id="main">
      <span>main section</span>
    </section>
  </div>
</div>

＆＃13;

对于旧的浏览器支持，您可以使用display: table或float

使用float

的示例

＆＃13;

#container .row:after {     /* clear fix for your float  */
  content: '';
  display: table;
  clear:both;
}
#container aside {
  float: left;
  width: 150px;
}
#container section {
  margin-left: 150px;
}
#main{
  background-color: red;
}

＆＃13;

<div id="container">
  <div class="row">
    <aside>
      <span>sidebar</span>
    </aside>
    <section id="main">
      <span>main section</span>
    </section>
  </div>
</div>

＆＃13;

Answer 2

您可以使该部分与表格单元格一样，以达到您想要的效果

＆＃13;

#container {
  display:table;
  width:100%;
}
#container .row {
  display:table-row;
}
#container aside, #container section {
  display:table-cell
}

aside {
  width:200px;
  background:blue;
}

#main{
  vertical-align: top;
  background-color: red;
  
  margin: -4px;
}

＆＃13;

  <body>
  <div id="container">
  
  <div class="row">
    <aside>
      <span>sidebar</span>
    </aside>
    <section id="main">
      <span>main section</span>
    </section>
  </div>
  </div>
  </body>

＆＃13;

Answer 3

只需在旁边和部分添加宽度，如下所示，这也非常适用于响应式页面。

#main{
width:70%;
 }
aside{
  width: 30%;
}

得到一个div来响应占用网页宽度的其余部分

3 个答案: