2 div并排排列，如何使右div填充宽度100％？ [英] 2 divs aligned side by side, how to make right div fill width 100%?

问题描述

我想知道最好的做法是...

我有3 div s：

• a div＃container $ c> width = 100％; 包含2个 div s



• p> a div＃inner_left 与 width 动态更改，但不得超过200像素（将包含产品图片） / p>



• div＃inner_right 其中宽度应填满容器中的其余空间用于描述所显示产品的文字）

    #container {
   width：100％
  } 
   
   #inner_left {
   display：inline-block：
   max-width：200px; 
  } 
   
   #inner_right {
   display：inline-block; 
   width：100％; 
  } 
    

问题是 div＃inner_right 创建换行符并填充整个宽度。如何使它们彼此对齐，右边 div 占据左边的宽度 div （动态变化？）。我已经得到这个工作其他方式，但我正在寻找一个干净的解决方案...

任何帮助CSS noob是非常感谢！ >

解决方案

查看液体布局，它可以描述您正在谈论的内容。

您可能正在寻找这一个。

，请尝试将显示设置为内联。但是，你不会在技术上能够使用块级元素，所以看看我在上面发布的链接。 ：）

如果您使用浮动广告，将宽度设置为100％的问题是它被视为100％的容器，因此它不会工作因为100％包括左div的宽度。

编辑：这里的是另一个答案的示例，为了简单起见，我已经编辑它包含示例网站的html / css。

我也会在下面包含它：

HTML

 < div id =contentwrapper> 
< div id =contentcolumn> 
< div class =innertube>< b>内容栏：< em>流体< / em>< / b>< / div& 
< / div> 
< / div> 
< div id =leftcolumn> 
< div class =innertube>< b>左栏：< em> 200px< / em>< / b>< / div& 
< / div> 
  

CSS

  #contentwrapper {
 float：left; 
 width：100％; 
} 
 
 #contentcolumn {
 margin-left：200px; / *将左边距设置为LeftColumnWidth * / 
} 
 
 #leftcolumn {
 float：left; 
 width：200px; / *左列宽度* / 
 margin-left：-100％; 
 background：＃C8FC98; 
} 
  

I'm wondering what the best way to go about doing this is...

I have 3 divs:

• a div#container with width=100%; that holds 2 inner divs

• a div#inner_left with width changing dynamically, but no wider than 200px (will hold a product image)

• an div#inner_right where the width should fill the rest of the space in the container (will contain text to describe the product shown)

  #container {
     width:100%
  }
  
  #inner_left {
      display:inline-block:
      max-width:200px;
  }
  
  #inner_right {
      display:inline-block;
      width:100%; 
  }
  

The problem is that the div#inner_right creates a line break and fills the entire width. How can I make them align next to each other, with the right div accounting for the width taken by the left div (which changes dynamically?). I've gotten this to work other ways, but I'm looking for a clean solution...

Any help for a CSS noob is much appreciated!

解决方案

Have a look at "liquid layouts" it can describe what you're talking about.

You're probably looking for this one.

In your example, try setting your display to inline. However, you won't technically be able to use block level elements in it, so have a look at the links I posted above. :)

The problem with setting the width to 100% if you're using floats is that it is considered 100% of the container, so it won't work either since the 100% includes the left div's width.

Edit: Here is the example of the other answer, I've edited it to include the html/css from the example site above for simplicity's sake.

I'll also include it below:

HTML

<div id="contentwrapper">
    <div id="contentcolumn">
        <div class="innertube"><b>Content Column: <em>Fluid</em></b></div>
    </div>
</div>
<div id="leftcolumn">
    <div class="innertube"><b>Left Column: <em>200px</em></b></div>
</div>

CSS

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin-left: 200px; /*Set left margin to LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -100%;
background: #C8FC98;
}

这篇关于2 div并排排列，如何使右div填充宽度100％？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！