CSS并排排列2个div

How do you align two divs next to each other when one has a set width and the other should automatically use up the rest of the space. If the set width div is omitted from the help, the other div should resize to take up all of the space from the container div.

当一个具有设定宽度而另一个应该自动用尽其余空间时,如何将两个div彼此相邻对齐。如果帮助中省略了设置宽度div,则另一个div应调整大小以占用容器div中的所有空间。

It is being used for image / content design. I want it so if there is no image, the content takes up it's space.

它被用于图像/内容设计。我想要它,所以如果没有图像,内容会占用它的空间。

Here's my code:

这是我的代码:

CSS

.sub-row-wrapper { 
    background: #f00; 
    text-align: left; 
    width: auto; 
    position:relative; 
    padding: 12px; 
    margin-bottom: 12px; 
    border-bottom: 1px; 
    border-style: solid; 
    border-color: #ccc; 
} 

.sub-row-left-col { 
    background: #ff0; 
    display:inline-block; 
    width: 25%;
   text-align: left; 
}

.sub-row-right-col { 
    background: #f0f; 
    display:inline-block; 
    width: auto;  
}

HTML

<div class="sub-row-wrapper">

    <div class="sub-row-left-col">
        <p>Left img</p>
    </div>

    <div class="sub-row-right-col">
        <p>This should be positioned right of 'left img' and should not go underneath the left img</p>
    </div>
</div>

I have the following code

我有以下代码

http://jsfiddle.net/fr9zvaj3/

What I want on the first div is for the yellow box to sit to the left of the purple box. The yellow box should be 25% wide and the purple box should use up whatever space is left.

我想要的第一个div是黄色框位于紫色框的左侧。黄色框应该是25%宽,紫色框应该用尽任何空间。

When I remove the yellow box, the purple box should automatically go full width (as it does on row 2)

当我取下黄色方框时,紫色方框应自动全宽(就像第2行一样)

2 个解决方案

#1

One solution is to use display: flex to container and set width: 100% to purple div:

一种解决方案是使用display:flex to container并设置width:100%to purple div:

.sub-row-wrapper {
  background: #f00;
  text-align: left;
  width: auto;
  position: relative;
  padding: 12px;
  margin-bottom: 12px;
  border-bottom: 1px;
  border-style: solid;
  border-color: #ccc;
  display: flex;/*set display to flex*/
}
.sub-row-left-col {
  background: #ff0;
  display: inline-block;
  width: 25%;
  text-align: left;
}
.sub-row-right-col {
  background: #f0f;
  display: inline-block;
  width: 100%;/*set width to 100%*/
}

<body>

  <div class="sub-row-wrapper">

    <div class="sub-row-left-col">
      <p>Left img</p>
    </div>

    <div class="sub-row-right-col">
      <div class="post-content">
        <p>This should be positioned right of 'left img' and should not go underneath the left img</p>
      </div>
    </div>

  </div>

  <div class="sub-row-wrapper">

    <div class="sub-row-right-col">
      <div class="post-content">
        <p>This should be full width when I put enough content in to make it full width</p>
      </div>
    </div>

  </div>

</body>

Reference

flex

#2

.sub-row-left-col { 
    background: #ff0; 
    display:inline-block; 
    width: 25%;
   text-align: left; 
   float: left;
}

.sub-row-right-col { 
    background: #f0f; 
    display:inline-block; 
    width: 100%;  
}

should do the trick i believe. float: left; and width:100%

应该做我相信的伎俩。向左飘浮;和宽度:100%

#1