CSS：使用 100% 的剩余宽度答案

【问题标题】：CSS: Using 100% of remaining widthCSS：使用 100% 的剩余宽度
【发布时间】：2013-06-22 23:05:00
【问题描述】：

我正在制作一个包含图像、标题、按钮、源代码的列表，但在使用 100% 的剩余宽度时遇到问题。

我的主要问题是我无法让 <textarea> 使用所有剩余的宽度和高度。

这是我得到的：

而我打算拥有的：

下面是源代码，CSS：

.listing {width:100%;background:#f1f1f1;display:table;}
.leftimage {clear:none;display:table-cell;padding:20px;}
.listing .information {padding: 20px;width:100%;display:table-cell;}
.listing .information .title {font-size:20px;color:#016b98;}
.listing .information .title a {color:#016b98;text-decoration:underline;}
.listing .information .outsideButton {float:left;padding-top:5px;padding-right:5px;clear:none;}
.listing .information .outsideButton {clear:right;}
.listing .information .outsideButton .button {border: 1px solid #626262;background:#d8d8d8;}
.listing .information .outsideButton .button .label {padding:5px;}
.listing .information .outsideButton .button .label a {color:#626262;}

HTML：

<div class="listing">

                    <div class="leftimage">
                        <div style="height:150px;"><!-- Allows to change image position on click without changing .listing size -->
                            <a><img class="preview" height="150px" src="img.png"></a>
                        </div>
                    </div>

                    <div class="information">
                        <div class="title">
                            <a>TITLE</a>
                        </div>
                        <div class="outsideButton">
                            <div class="button">
                                <div class="label">
                                    <a>BUTTON 2</a>
                                </div>
                            </div>                              
                        </div>
                        <div class="outsideButton">
                            <div class="button">
                                <div class="label">
                                    <a>BUTTON 3</a>
                                </div>
                            </div>                              
                        </div>
                        <div class="outsideButton">
                            <div class="button">
                                <div class="label">
                                    <a>BUTTON 4</a>
                                </div>
                            </div>                              
                        </div>
                        <div class="outsideButton">
                            <div class="button">
                                <div class="label">
                                    <a>BUTTON 5</a>
                                </div>
                            </div>                              
                        </div>
                        <!-- END OF BUTTONS -->

                        <!-- HERE I WANT TO DISPLAY THE TEXTAREA WITH HTML CODE -->
                        <div style="float:left;padding-top:10px;clear:left;width:100%;">
                            <textarea style="padding:0;margin:0;width:100%;"><?php echo htmlspecialchars("<div><span>Whatever...</span></div><div><span>Whatever...</span></div><div><span>Whatever...</span></div><div><span>Whatever...</span></div><div><span>Whatever...</span></div><div><span>Whatever...</span></div>"); ?></textarea>
                        </div>
                        <!-- END OF TEXTAREA WITH HTML CODE -->

                    </div><!-- END OF .information -->
                </div>

谢谢。

解决方案： 为每个表格单元格设置vertical-align:top;

【问题讨论】：

可能重复？ stackoverflow.com/questions/1017880/…
不是真正的重复，因为该帖子并没有真正解决这个问题。我正在尝试让<textarea> 使用所有剩余的宽度和高度。
是的，但您自己发现父级本身的宽度不是 100% - 这是因为它是浮动的，这就是我的“重复”所指的
好的。删除浮动会产生不同的问题。
你不一定需要花车...例如你可以使用display: table-cell 来实现同样的效果......也许看看stackoverflow.com/questions/17256222/… 来使用显示属性。

标签： css css-float textarea width

【解决方案1】：

正如我的 cmets 中提到的那样，这可能有助于您获得相同的结果，但根本不使用浮点数：

CSS for HTML dynamic layout with not fixed columns?

使用display: table; 和display: table-cell; 属性构建布局，然后在<textarea> 上使用width: 100%

编辑：

您的按钮仍然使用浮点数 - 正确清除它们 - 例如将它们包装在 <div class="clearfix"> 中并使用此 css：

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

编辑：

对于任何提到这个问题的人：正如 2013Asker 所指出的，在使用 display: table-cell 时不要忘记设置 vertical-align:

【讨论】：

问题比我想象的要简单得多：vertical-align，它应该明确设置为vertical-align:top;，以便正确显示列表。跨度>

【解决方案2】：

首先您必须告诉容器 div 获取剩余空间，然后告诉 textarea 获取其父级的所有空间。为每个添加 'width: 100px'。

<div style="float:left;padding-top:10px;clear:left; width:100%">
<textarea style="padding:0;margin:0; width: 100%"><?php echo htmlspecialchars("<div>    <span>Whatever...</span></div><div><span>Whatever...</span></div><div><span>Whatever...</span></div><div><span>Whatever...</span></div><div><span>Whatever...</span></div><div><span>Whatever...</span></div>"); ?>
</textarea>
</div>

【讨论】：

我尝试了这个以及我在 StackOverflow 上找到的许多其他答案，即使使用 display:table-cell，但解决方案不起作用。这会扩展宽度，但 div .information 的大小不合适。如果我将.information 设置为 100%，它会出现在图像下方。去掉float:left，加上100%，div出现在正确的位置，但<textarea>出现在下方，占据了整个listing宽度。