Question

我有以下HTML：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div id="def" style="margin-bottom: 4rem; margin-left: auto; margin-right: auto; margin-top: 7.25rem; width: 90%;">

        <div id="abc" style="display: table-row; width: 100%;">
            <div style="width: 50%; height: 20px; background-color: green;">
                I want this to fill almost 45% of the width of the screen
            </div>
            <div style="width: 50%; height: 20px; background-color: red;">
                I want this to fill almost 45% of the width of the screen
            </div>
        </div>

    </div>
</body>
</html>

我在上面尝试了这个代码，但似乎表格行中的DIV不会扩展宽度。如果可能的话，我想在id为abc的div中解决，因为我无法改变div的样式def

Answer 1

利用float属性

<div id="def" style="margin-bottom: 4rem; margin-left: auto; margin-right: auto; margin-top: 7.25rem; width: 90%;">

        <div id="abc" style="display: table-row; width: 100%;">
            <div style="width: 50%; height: 20px; background-color: green; float:left">
                I want this to fill almost 45% of the width of the screen
            </div>
            <div style="width: 50%; height: 20px; background-color: red; float:right">
                I want this to fill almost 45% of the width of the screen
            </div>
        </div>

    </div>

Answer 2

很简单，如果你想制作一个类似于表格的结构，请在div上使用display: table-cell;：

 <div id="def" style="margin-bottom: 4rem; margin-left: auto; margin-right: auto; margin-top: 7.25rem; width: 90%; display: table;">

    <div id="abc" style="display: table-row; width: 100%;">
        <div style="display: table-cell; width: 50%; height: 20px; background-color: green;">
            I want this to fill almost 45% of the width of the screen
        </div>
        <div style="display: table-cell; width: 50%; height: 20px; background-color: red;">
            I want this to fill almost 45% of the width of the screen
        </div>
    </div>

</div>

你也可以使用float: left;，但由于它已经是一个展示的桌子，你也可以继续这样做。

修改：要完成，我向display: table; div添加了#def。

你可以看到fiddle这个。正如其他人所说的那样，将CSS与HTML分开总是更好，正如我在小提琴中所做的那样。

Answer 3

您可以执行以下操作以获得所需的结果

<强> FIDDLE DEMO

<强> CSS

.container {
    margin-bottom: 4rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 7.25rem;
    width: 90%;
    border:2px solid;
    background:yellow;
}
.subcontainer {
    display: table-row;
    width: 100%;
}
.first {
    width: 50%;
    height: 20px;
    background-color: green;
    float:left;/***Use This***/

}
.second {
    width: 50%;
    height: 20px;
    background-color: red;
    float:right;/***Use This***/
}

或者您可以使用 table-cell

<强> FIDDLE DEMO

.first {
    width: 50%;
    height: 20px;
    background-color: green;
    display:table-cell;/***Use This***/

}
.second {
    width: 50%;
    height: 20px;
    background-color: red;
    display:table-cell;/***Use This***/
}

编辑：单独编写CSS总是更好

Answer 4

display: table-cell;内的div上需要table-row。

像这样：

  <div id="def" style="margin-bottom: 4rem; margin-left: auto; margin-right: auto; margin-top: 7.25rem; width: 90%;">

        <div id="abc" style="display: table-row; width: 100%;">
            <div style="width: 50%; height: 20px; background-color: green; display:table-cell">
                I want this to fill almost 45% of the width of the screen
            </div>
            <div style="width: 50%; height: 20px; background-color: red; display:table-cell">
                I want this to fill almost 45% of the width of the screen
            </div>
        </div>

    </div>

JSFiddle

浮动也适用（当你支持旧的IE时更好），但display: table-cell;更符合你正在做的事情。

如何在CSS显示中创建2个单元格：table-row占据行的50％？

4 个答案: