Question

我一直在使用文本字段和两个选择字段来完成这个简单的页面，我可以在其中选择文本颜色和文本大小。我为每个div添加了一些不同颜色的边框，看看它们放在哪里。我遇到的问题是当我为文本选择更大的大小并且它溢出容器时，但我希望容器随着文本的增长而增长，更清楚的是，我希望文本在边框内部，无论其大小如何，如果文字变大，边框会变大。我会把我的小提琴链接和css：

http://jsfiddle.net/jdelva/CCLJ4/2/

的CSS：

div {
   display:inline;
}

div.main {
    border-style:solid;
    border-width:thin;
    border-color:blue;
    margin-left:60px;
}

div.subject {
    width:3cm;
    border-style:solid;
    border-width:thin;
    border-color:green;
}

#control {
    border-style:solid;
    border-width:thin;
    border-color:red;
    margin-right:60px;
}

我尝试使用overflow属性，但它似乎与内容一起使用而不是与容器一起使用。谢谢你的时间！

Answer 1

您的div的样式为＆＃34;显示：内联;＆＃34;，将其更改为＆＃34;显示：inline-block;＆＃34;

div
{
    display:inline;
}

更改为：

div
{
    display:inline-block;
}

这样想。内联元素并不意味着包含块元素。例如，＆lt; span＆gt; （这是一个内联元素）可以从一行的末尾跨越到另一行的开头，因此它没有明确定义的宽度或高度：

..... ..... ..... ..... ..... ..... ..... <span>Hello
World </span> ..... ..... ..... ..... ..... ..... ...

但是你不想把它变成一个块（或者＆lt; div＆gt;），因为它占用整行：

<div>Hello ..... ..... ..... ..... ..... ..... </div>
<div>World ..... ..... ..... ..... ..... ..... </div>

因此，如果您声明一个元素内联块，则可以并排放置几个块

<div class="ib">Hello</div><div class="ib">World</div>

Answer 2

当您将div的显示属性更改为inline时，您将无法控制该容器的高度，因为它不再是块元素。使用inline-block将解决此问题。

div
{
  display:inline-block;
}

div.subject {
  border: thin solid #008000;

}

干杯！

Answer 3

将此添加到输入周围的所有元素：

display: block;
height: 100%;

我试了一下，效果很好。

HTML / CSS文本溢出其容器

3 个答案: