我有以下 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
最佳答案
您可以执行以下操作以获得所需的结果
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
.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 总是更好
关于html - 如何在 CSS 显示 : table-row occupy 50% of the row? 中制作 2 个单元格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25360937/