html - 文本使我的 div 变形

Question

文本使我的框变形。

这是我的:

<div class="BigOne" ></div>
<div class="leftOne" ></div>
 <div class="rightOne">This text is deforming the "leftOne"</div>
</div>

还有 CSS:

  .leftOne    {
    float: left;
    width: 100%;
    height: 100%;
    border: 3px dashed #444;
    border-radius: 7px;
    box-sizing: border-box;
}

  .rightOne    {
    float: left;
    width: 100%;
    height: 100%;
    border: 3px dashed #444;
    border-radius: 7px;
    box-sizing: border-box;
}

例如，如何通过变形左侧 div 来显示右侧 div 的文本？

谢谢

Answer 1

我从你的问题和解释中了解到，你想要 leftOne 的宽度和 rightOne无论BigOne如何，始终保持相同大小的宽度。然后你想将宽度更改为 50%而不是 100%像这样:

.leftOne, .rightOne {
    float: left;
    width: 50%; /* Change this to 50% instead of 100% */
    height: 100%;
    border: 3px dashed #444;
    border-radius: 7px;
    box-sizing: border-box;
}

请注意，您可以重构 CSS，因为这两个类具有相同的样式。如果你想对它们中的每一个应用不同的样式，你可以将它们分开。

我还注意到您已将它们的高度设置为 100% .如果想让它们保持相同的高度，需要指定BigOne的高度类(class)。例如:

.bigOne {
    width: 100%; /*or whatever width you want to set it to */ 
    height: 100px; /*or whatever height you want to set it to */ 
}

另一件事，你有一个额外的</div>在第一行。删除它，您的代码应该可以工作。

<div class="bigOne">
    <div class="leftOne"></div>
    <div class="rightOne">This text is deforming the "leftOne"</div>
</div>

希望对您有所帮助。