Question

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

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

这是我得到的： enter image description here

我打算拥有什么： enter image description here

在源代码下面，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;

Answer 1

首先，您必须告诉容器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>

Answer 2

正如我在评论中提到的那样，这可能会帮助您实现相同的结果，但根本不使用浮点数：

CSS for HTML dynamic layout with not fixed columns?

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

编辑：

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

.clearfix {
  *zoom: 1;
}

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

.clearfix:after {
  clear: both;
}

编辑：

对于提及此问题的任何人：正如2013Asker所指出的，请勿忘记在使用vertical-align:时设置display: table-cell

CSS：使用100％的剩余宽度

2 个答案: