Question

我希望黄色方框能够垂直和水平填充所有可用空间，而不会覆盖图片。

（我试图在不使用表属性的情况下尝试）

有什么想法吗？

现在的样子：

This is how it looks now

这就是我想要的：

and this is what i want

＆＃13;

$total_queries = Query::select(DB::raw('SUM(showed) as counter, SUM(answered) as answered'))
              ->where('client_app_id','=', $app_id)->get();

＆＃13;

.content-block-body{
    width: 100%;
    background-color: brown;
    overflow:auto;
}
.content-block-text{
    float:left;
    background-color: red;
    padding:2%; 
}
.content-block-image{
    background-color: greenyellow;
    float: right;
}

＆＃13;

Answer 1

问题是float: left使黄色区域不会拉伸。＆＃34;要使图像浮动到文本的右侧，它必须位于文本之前。所以我们改变了内容块的顺序：

<div class="content-block-body">
  <div class="content-block-image"> <img src="image-1.jpg"> </div>
  <div class="content-block-text">
    <div>月額固定と成果報酬が選べます</div>
    <div>成果報酬額に上限おもうけられます</div>
    <div>料金が明瞭で予算に合わせた対策が可能</div>
  </div>
</div>

然后调整css：

.content-block-body {
    width: 100%;
    background-color: brown;
    overflow:auto;
}
.content-block-text{
    /*float:left;*/ /* this we remove */
    background-color: red;
    padding:2%; 
    /* this we add: */
    overflow: auto;
}
.content-block-image{
    background-color: greenyellow;
    float: right;
}

请注意，每当你浮动东西时，你很可能需要添加名为＆＃34; clearfix＆＃34;的东西。在这种情况下，将clearfix应用于.content-block-body以使其垂直延伸以适合浮动元素http://nicolasgallagher.com/micro-clearfix-hack/

Answer 2

您必须在CSS中指定左侧块和右侧块的宽度，并使图像宽度为100％

＆＃13;

.content-block-body{
    width: 100%;
    background-color: brown;
    overflow:auto;
}
.content-block-text{
    float:left;
    background-color: yellow;
    padding:2%;
    width:56%;
}
.content-block-image{
    background-color: greenyellow;
    float: right;
    min-width:200px;
    width:40%;
}
.content-block-image img{
    width:100%;
}

＆＃13;

<div class="content-block-body">
  <div class="content-block-text">
    <div>月額固定と成果報酬が選べます</div>
    <div>成果報酬額に上限おもうけられます</div>
    <div>料金が明瞭で予算に合わせた対策が可能</div>
  </div>
  <div class="content-block-image"> <img src="image-1.jpg"> </div>
</div>

＆＃13;

Answer 3

您可以使用css3 flex。当获得子节点的父节点的高度时，这是唯一正常工作的东西。旧浏览器的所有黑客攻击并不总是有效。

＆＃13;

.content-block-body{
    width: 100%;
    background-color: brown;
    overflow:auto;
    display: flex;
    clear: both;
}
.content-block-text{
    float:left;
    background-color: red;
    align-items: stretch;
}
.content-block-image{
  flex: 1;
  background-color: greenyellow;
}

.content-block-image img{
  float: right;
}

＆＃13;

<div class="content-block-body">
  <div class="content-block-text">
    <div>月額固定と成果報酬が選べます</div>
    <div>成果報酬額に上限おもうけられます</div>
    <div>料金が明瞭で予算に合わせた対策が可能</div>
  </div>
  <div class="content-block-image"> 
    <img src="//placehold.it/250x250">
  </div>
</div>

＆＃13;

还可以查看这个很酷的网站，了解centering in css上的代码段。

浮动子div仅填充剩余空间

3 个答案: