Question

我有这个样本

代码HTML：

<div class="nav">
  <ul>
    <li>Link1</li>
    <li>Link2</li>
    <li>Link3</li>
    <li>Link4</li>
  </ul>
</div>
<div class="right">
  asdasdsa
</div>

CODE CSS：

.nav{
  float:left;
  display:inline-block;
  width:200px;
  background:red;
}
.right{
  background:blue;
  width:80%;
  float:left
}

你能告诉我怎么能把div div固定好，而蓝色的右边则占据剩下的所有空间。

我希望div .nav始终200px.

您能告诉我如何编辑CSS代码吗？

提前致谢！

Answer 1

比使用calc更简单的解决方案。

只需将div放在父div中，然后给父display:flex;

这也意味着您可以通过删除display:inline-block;和float属性来简化CSS。

编辑：在第二个子div上使用flex:1代替width:80%。这将使它占用flex父div中的剩余空间。

.nav{
  width:200px;
  background:red;
}
.right{
  background:blue;
  flex: 1;
}
.flex{
  display:flex;  
}

<div class="flex">
<div class="nav">
  <ul>
    <li>Link1</li>
    <li>Link2</li>
    <li>Link3</li>
    <li>Link4</li>
  </ul>
</div>
<div class="right">
  asdasdsa
</div>
</div>

Answer 2

只需使用calc：

＆＃13;

.nav{
  float:left;
  display:inline-block;
  /* Apply a width of 20% for older browsers that dont have calc */
  width: 20%;
  /* Apply the correct width for browsers that support calc */
  width: calc(200px);
  background:red;
}
.right{
  background:blue;
  width: 80%;
  width: calc(100% - 200px);
  float:left
}

＆＃13;

<div class="nav">
  <ul>
    <li>Link1</li>
    <li>Link2</li>
    <li>Link3</li>
    <li>Link4</li>
  </ul>
</div>
<div class="right">
  asdasdsa
</div>

＆＃13;

Answer 3

body {
    padding: 0;
    margin: 0;
}
main {
    display: flex;
    flex-direction: column;
}

section {
    flex: 1 1 100vh;
    display: flex;
}

aside {
    flex: 0 0 256px;
    order: 0;
    background: cornflowerblue;
}

article {
    flex: 1 1 100px;
    order: 1;
    background: crimson;
}

<main>
    <section>
        <aside>
          <nav>
            <ul>
              <li>Link1</li>
              <li>Link2</li>
              <li>Link3</li>
              <li>Link4</li>
            </ul>
          </nav>
        </aside>
        <article>
          asdasdsa
        </article>
    </section>
</main>

现代浏览器的最佳解决方案 - http://jsfiddle.net/mu748why/16/

有关详情，请访问此处 - https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 4

#main {
    width: 220px;
    height: 300px;
    border: 1px solid black;
    display: -webkit-flex; /* Safari */
    display: flex;
}

#main div {
    -webkit-flex: 1;  /* Safari 6.1+ */
    -ms-flex: 1;  /* IE 10 */    
    flex: 1;
}
</style>

<div id="main">
  <div style="background-color:coral;">RED</div>
  <div style="background-color:lightblue;">BLUE</div>  
  <div style="background-color:lightgreen;">Green div with more content.</div>
</div>

Div填补剩余空间.CSS

4 个答案: