Question

我有三个小部件。所有小部件都包含长度未知的文本。小部件应该与文本最长的小部件一样长。

在这种情况下，蓝色和绿色小部件应该比实际长。所有小部件背景必须具有确切的长度，而不隐藏某些内容。

我该怎么做？

.first {width: 24%;float:left; padding:5px; background: blue;}
.second {width: 24%; padding:5px;float:left; background: red;}
.third {width: 24%; padding:5px;float:left; background: green;}

<div class="first">This is text.This is text.This is text.This is text.This is text.This is text.</div>
<div class="second">This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.</div>
<div class="third">This is text.This is text.This is text.This is text.This is text.This is text.</div>

Answer 1

您可以使用CSS3 flexboxes：

Example Here

.parent {
    display: flex;
}
.parent > div {
    padding: 5px;
    width: 33.33%;
}

对弹性箱的支持可以是found here。

.parent {
    display: flex;
}
.parent > div {
    padding: 5px;
    width: 33.33%;
}
.first {
    background: blue;
}
.second {
    background: red;
}
.third {
    background: green;
}

<div class="parent">
    <div class="first">This is text.This is text.This is text.This is text.This is text.This is text.</div>
    <div class="second">This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.</div>
    <div class="third">This is text.This is text.This is text.This is text.This is text.This is text.</div>
</div>

或者，您也可以使用CSS3表：

Example Here

.parent {
    display: table;
}
.parent > div {
    padding: 5px;
    width: 33.33%;
    display: table-cell;
}

对CSS3表的支持可以是found here。

.parent {
    display: table;
}
.parent > div {
    padding: 5px;
    width: 33.33%;
    display: table-cell;
}
.first {
    background: blue;
}
.second {
    background: red;
}
.third {
    background: green;
}

<div class="parent">
    <div class="first">This is text.This is text.This is text.This is text.This is text.This is text.</div>
    <div class="second">This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.</div>
    <div class="third">This is text.This is text.This is text.This is text.This is text.This is text.</div>
</div>

创建三个具有完全相同长度的div容器而不隐藏某些东西

1 个答案: