Question

我是一个特例。我希望div使用可用的宽度。

这是我的代码：

＆＃13;

.parent {
  width: 100%;
}
.child-left {
  width: 66%;
  float: left;
}
.child-right {
  width: 33%;
  min-width: 400px;
  float: right;
}

＆＃13;

<div class="parent">
  <div class="child-left">
    Lorem Ipsum
  </div>
  <div class="child-right">
    Lorem Ipsum
  </div>
</div>

＆＃13;

child-right元素应至少为400px宽度。如果我调整屏幕大小，元素就会崩溃。有没有办法，child-left元素使用可用的水平空间？也许是CSS-Flexbox？

Answer 1

我认为你可以使用flex yes。

.parent{
  display:flex;
  justify-content: space-between;
}
.child-right{
  flex-basis: 400px;
}

Answer 2

由于您希望使用child-left的可用空余空间而不允许child-right换行到新行，因此使用flexbox非常理想：

移除浮动并将display: flex添加到parent。
将flex: 1添加到child-left，以便自动调整可用空间。
使用min-width设置child-right的{{1}}，这意味着该元素只会缩放{400}的flex: 0 1 400px。

flex-basis

.parent {
  width: 100%;
  display: flex;
}
.child-left {
  flex: 1;
}
.child-right {
  flex: 1 0 400px;
}

请告诉我您对此的反馈。谢谢！

Answer 3

您可以使用此技巧实现跨浏览器兼容性，无需Flexbox：

.child-left {
    width: auto;
    overflow: none;
}
.child-right {
    width: 33%;
    min-width: 400px;
    float: right;
}

请注意，您必须先将您的孩子放在HTML中。 float: right;中的.child-right使div仅与以下元素一起浮动。如果你把它放在.child-left之后，它就不会漂浮在它旁边。

<div class="parent">
      <div class="child-right">
        Lorem Ipsum
    </div>
    <div class="child-left">
        Lorem Ipsum
    </div>
</div>

请参阅此操作：https://jsfiddle.net/4s3oecrp/

此外，您应该删除.parent类的css样式。对于display: block;设置的元素（默认在p，div，section，article，...）上，100％宽度无用，它们会自动拉伸到其全宽。

Answer 4

你可以用户flex。只需将flex添加到父div

 var http = require('http');
    http.createServer(function(request, response) {
        response.setHeader('Connection', 'Transfer-Encoding');
        response.setHeader('Content-Type', 'text/html; charset=utf-8');
        response.setHeader('Transfer-Encoding', 'chunked');

        response.write('hello');

        setTimeout(function() {
            response.write(' world!');
            response.end();
        }, 10000);

    }).listen(8888);

为了更好地学习 http://www.w3schools.com/cssref/css3_pr_flex.asp

使用css可用的宽度

4 个答案: