Question

基本上我想做的是将一个固定宽度的div粘贴到右侧，将一个固定高度的div粘贴到底部，并用一个div填充剩下的空间。第三个div应该自动包装文本，其他div应该调整它们各自的高度和宽度到容器。

这是我到目前为止所拥有的： https://jsfiddle.net/u0owp3jy/1/

＆＃13;

 body {
       background-color: black;
       box-sizing: border-box;
    }

    #wrapper {
       display: table;
       width: 50%;
       height: 300px;
       margin-top: 10px;
	   margin-left: auto;
	   margin-right: auto;
       border: solid;
       border-width: 3px;
       border-color: red;
    }

    #flex {
       background-color: blue;
       /*width: calc(100% - 170px);*/
       width: auto;
       float: left;
       display: table-row; 
       height: 100%;
       padding: 10px;
       overflow-y: auto;
    }

    #static-left {
       background-color: yellow;
       float: right;
       display: table-row; 
       height: 100%;

       width: 140px;
       border-left: solid;
       border-width: 3px;
       border-color: red;
       overflow-y: auto;
    }

    #static-bottom {
       display: table-row;
       background-color: green;
       height: 50px;
       width: 100%;
       border-top: solid;
       border-width: 3px;
       border-color: red;
    }

＆＃13;

    <div id="wrapper">
       <div id="flex"></div>

       <div id="static-left"></div>

       <div id="static-bottom"></div>
    </div>

＆＃13;

这个问题是，为了获得灵活div的正确宽度，我需要使用calc（）这是坏的，另一件事是，底部div的边框不显示。

此外，如果您显然有width: auto;，则textwrapping不起作用。如果可能的话，我只想用css做这件事。它也适用于移动浏览器。

Answer 1

尝试以下解决方案。我用flexbox解决了这个问题。另外，我对你的CSS进行了一些优化，以获得更清晰，更好的CSS代码。

＆＃13;

body {
  background-color: black;
}
.top-wrapper {
  align-items:stretch;
  align-self:flex-start;
  display:flex;
  flex-direction:row;
  height:100%;
  max-height:250px;
  width:100%;
}
#wrapper {
  align-items:stretch;
  border:3px solid #f00;
  display: flex;
  flex-direction: column;
  flex-wrap:nowrap;
  height:300px;
  margin:10px auto 0;
  overflow:hidden;
  width:50%;
}
#flex {
  background-color:blue;
  flex-grow:1;
  overflow:auto;
  padding:10px;
  word-wrap:break-word;
}
#static-left {
   background-color:yellow;
   border-left:3px solid #f00;
   overflow-y:auto;
   width:140px;
}
#static-bottom {
  background-color:green;
  border-top:3px solid #f00;
  box-sizing:content-box;
  height:50px;
  width:100%;
}

＆＃13;

<div id="wrapper">
  <div class="top-wrapper">
    <div id="flex">
      asdddddddddddd dddd dfdfd dfdfdfd<br/>
      asd<br/>
      asd<br/>
      asd<br/>
      asd<br/>
      asd<br/>
      asd<br/>
      asd<br/>
      asd<br/>
      asd<br/>
      asd<br/>
      asd<br/>
    </div>
    <div id="static-left">
      asd<br/>
      asd<br/>
      asd<br/>
      asd<br/>
      asd<br/>
      asd<br/>
      asd<br/>
      asd<br/>
      asd<br/>
      asd<br/>
    </div>
  </div>
  <div id="static-bottom">
    asd<br/>
    asd<br/>
    asd<br/>
    asd<br/>
  </div>
</div>

＆＃13;

在这里你可以找到小提琴：https://jsfiddle.net/sebastianbrosch/0ypmw3xz/

调整div大小以匹配其他div

1 个答案: