Question

我有3个div框，它们完美对齐并居中，然后当我在div中添加文本时，父div会拉伸并调整大小到内部。我尝试在子元素和父元素上使用resize：none，但是没有做任何事情。也尝试使用position：absolute;和亲戚。

HTML

<div class="boxes-parent">
    <div class="left-box">
        <div class="blue-boxes">
            <h1 class="blue-box-header-text">About</h1>
            <p class="blue-box-text">I used to be better at CSS and HTML. Sorry!</p>
        </div>
    </div>
    <div class="center-box">
        <div class="blue-boxes">
            <h1 class="blue-box-header-text">Info</h1>
            <p class="blue-box-text">Info info info.</p>
        </div>
    </div>
    <div class="right-box">
        <div class="blue-boxes">
            <h1 class="blue-box-header-text">Contact</h1>
            <p class="blue-box-text">Phone: (888) 888-8888</p>
        </div>
    </div>
</div>

CSS

.boxes-parent {
    margin: 0px auto;
    text-align: center;
}

.left-box, .center-box, .right-box {
    padding-top: 10px;
    padding-left: 2%;
    padding-right: 2%;
    display: inline-block;
    position: relative;
    min-width: 25%;
}

.blue-boxes {
    background-color: #3498db;
    height: 250px;
    position: absolute;
    resize: none;
}

.blue-box-header-text {
    padding-top: 20px;
    font-size: 26px;
    color: #fff;
}

.blue-box-text {
    resize: none;
    max-width: 500px;
    position: relative;
    display: inline;
}

结果：https://jsfiddle.net/0wvyaqbo/

此外，我的问题有时会被低估。对如何更好地格式化这个问题有任何建议吗？试图让它适用于其他人。谢谢你的帮助！

Answer 1

有几件事情在发生：

首先，您将.right, .center, .left div设置为inline-block。默认情况下，由于inline-block，它们始终是内容的宽度。您需要将它们设置为block。此外，.blue-boxes应设置为relative定位，而不是absolute。

这是更新的CSS：

.boxes-parent {
    margin: 0px auto;
    text-align: center;
}

.left-box, .center-box, .right-box {
    padding-top: 10px;
    padding-left: 2%;
    padding-right: 2%;
    display: block;
    position: relative;
    width: 25%;
    float:left;
}

.blue-boxes {
    background-color: #3498db;
    height: 250px;
    position: relative;
}

.blue-box-header-text {
    padding-top: 20px;
    font-size: 26px;
    color: #fff;
}

.blue-box-text {
    resize: none;
    max-width: 500px;
    position: relative;
    display: inline;
}

更新的小提琴： https://jsfiddle.net/0wvyaqbo/1/

Answer 2

默认情况下， divs 之类的父元素是灵活的，并且会调整大小以包含放入其中的任何内容（高度）或其父元素/浏览器正在执行的任何内容（宽度），除非您指定他们的尺寸。在父级上使用CSS width和height或max-width和max-height来限制其增长。

通常，首选灵活的父级（请参阅：响应式设计），因为某些用户可能会选择修改您的网站使用的字体，增加字体大小以提高可见性或查看网站来自不同的设备，这些操作可以更改您的内容的相对大小。

更多信息：http://www.w3schools.com/cssref/pr_dim_height.asp

Answer 3

另一种方法是使用flexbox。只需将display: flex和justify-content: center添加到.boxes-parent，然后将min-width更改为width，.left-box和{{1}的.center-box }}。结果代码如下所示：

＆＃13;

.right-box

＆＃13;

.boxes-parent {
  margin: 0 auto;
  text-align: center;
  display: flex;
  justify-content: center;
}
.left-box,
.center-box,
.right-box {
  width: 25%;
  padding: 10px 2% 0;
}
.blue-boxes {
  background-color: #3498db;
  height: 250px;
}
.blue-box-header-text {
  padding-top: 20px;
  font-size: 26px;
  color: #fff;
}

＆＃13;

或者，您可以将<div class="boxes-parent"> <div class="left-box"> <div class="blue-boxes"> <h1 class="blue-box-header-text">About</h1> <p class="blue-box-text">I used to be better at CSS and HTML. Sorry!</p> </div> </div> <div class="center-box"> <div class="blue-boxes"> <h1 class="blue-box-header-text">Info</h1> <p class="blue-box-text">Info info info.</p> </div> </div> <div class="right-box"> <div class="blue-boxes"> <h1 class="blue-box-header-text">Contact</h1> <p class="blue-box-text">Phone: (888) 888-8888</p> </div> </div> </div>用于flex: 1 1 25%，.left-box和.center-box。这迫使他们彼此成长和缩小。

＆＃13;

.right-box

＆＃13;

.boxes-parent {
	margin: 0 auto;
	text-align: center;
  display: flex;
  justify-content: center;
}

.left-box, .center-box, .right-box {
  flex: 1 1 25%;
	padding: 10px 2% 0;
}

.blue-boxes {
	background-color: #3498db;
	height: 250px;
}

.blue-box-header-text {
	padding-top: 20px;
	font-size: 26px;
	color: #fff;
}

＆＃13;

有关flexbox的更多信息，css-tricks有一个很好的reference sheet。这里也是support tables。

Answer 4

您使用了min-width，预计添加内容不会导致它们增长？只需使用width。
设置.blue-boxes { position: absolute; }会导致缩小到内容的大小。您可以添加width: 100%;。
由于使用绝对定位会使布局混乱，避免使用它的解决方案会很好。删除绝对定位时，蓝色框不再垂直对齐。设置vertical-align: top;以解决此问题。

＆＃13;

.boxes-parent {
    margin: 0px auto;
    text-align: center;
}

.left-box, .center-box, .right-box {
    padding-top: 10px;
    padding-left: 2%;
    padding-right: 2%;
    display: inline-block;
    width: 25%;
    vertical-align: top;
}

.blue-boxes {
    background-color: #3498db;
    height: 250px;
}

.blue-box-header-text {
    padding-top: 20px;
    font-size: 26px;
    color: #fff;
}

.blue-box-text {
    display: inline;
}

＆＃13;

<div class="boxes-parent">
    <div class="left-box">
        <div class="blue-boxes">
            <h1 class="blue-box-header-text">About</h1>
            <p class="blue-box-text">I used to be better at CSS and HTML. Sorry!</p>
        </div>
    </div>
    <div class="center-box">
        <div class="blue-boxes">
            <h1 class="blue-box-header-text">Info</h1>
            <p class="blue-box-text">Info info info.</p>
        </div>
    </div>
    <div class="right-box">
        <div class="blue-boxes">
            <h1 class="blue-box-header-text">Contact</h1>
            <p class="blue-box-text">Phone: (888) 888-8888</p>
        </div>
    </div>
</div>

＆＃13;

为什么父div会调整其子元素的大小？

4 个答案: