gpt4 book ai didi

html - 在这个两列的 CSS 布局中,每个 DIV 不能占 50%?

转载 作者:太空宇宙 更新时间:2023-11-04 04:51:58 25 4
gpt4 key购买 nike

问题

如果两个宽度均为 50%,则第二个 DIV 正在换行,但如果我将 一个 的宽度设置为 DIV 49% 它将布局为两列。这是预期的行为还是我做错了什么?

CSS

.box
{
display: block;
width: 100%;
padding: 0;
}

.box.twocolumn .column1
{
display: inline;
float: left;
width: 50%;
padding: 0;
margin: 0;
}

.box.twocolumn .column2
{
display: inline;
float: left;
width: 50%;
padding: 0;
margin: 0;
}

HTML

<div class="box">
<div class="box twocolumn">
<div class="column1">
<label>
Start Date:</label>
<asp:TextBox ID="StartDate" CssClass="datepicker" runat="server"></asp:TextBox>
</div>
<div class="column2">
<label>
End Date:</label>
<asp:TextBox ID="EndDate" CssClass="datepicker" runat="server"></asp:TextBox>
</div>
</div>
</div>

最佳答案

你的问题很含糊,但我尽量给出一个可能解决你问题的答案:

首先,您应该始终包含一个正确的文档类型,以使所有浏览器的行为方式相同。推荐的是<!DOCTYPE html> .它适用于所有浏览器,甚至是 IE6。

您还必须注意可能的 box-models .

现在您可以尝试设置 box-sizing div 上的属性,例如 in this example .此外,将显示类型设置为 display:inline-block ,因为 width在内联元素上无法识别!

前两个 div 放在一行中,因为它们有 box-sizing:border-box声明 - 边框和填充都包含在 50% 中宽度。

后两个 div 中断是因为它们具有标准的 w3c-box 模型。 50% width只占content,padding和border加到width上,超过了100%总宽度。

我很确定这可以解决您的问题。如果是这种情况,您的代码中的其他地方有一些 css,它会修改您的 div(添加边框/填充)以使其换行。

关于html - 在这个两列的 CSS 布局中,每个 DIV 不能占 50%?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13290287/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com