gpt4 book ai didi

css - 即使第二个 div 溢出,如何并排保持两个内联 block div

转载 作者:搜寻专家 更新时间:2023-10-31 08:35:40 26 4
gpt4 key购买 nike

我有以下 html 和 css 代码:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body
{
background-color:#d0e4fe;
}

div.container
{
width: 600px;
border: solid 1px black;
}

div.divLeft
{
display:inline-block;
border: solid 1px red;
color: red;
}

div.divRight
{
display:inline-block;
border: solid 1px blue;
color: blue;
}

</style>
</head>

<body>
<div class="container">
<div class="divLeft">
<p>1 - Some short text</p>
</div>
<div class="divRight">
<p>Some not too long text with the div besides the first one.</p>
</div>
</div>
<div class="container">
<div class="divLeft">
<p>2 - Some short text</p>
</div>
<div class="divRight">
<p>Some very long text that will eventually wrap because it is so long and when it wraps is when the trouble starts because the div moves down instead of staying besides the first one.</p>
</div>
</div>
</body>
</html>

在第二种情况下,有没有办法让 div 保持在第一个之外而不是移动到第一个下面。请注意,我不能为我的 div 使用固定宽度,因为将在其中出现的文本长度未知。然后我唯一知道的是第一个 div 中的文本总是很短,而第二个 div 中的文本可能很长。

这是我想要的基本图表:

First div text  Second div text stays beside the first one
and wraps around still being aligned like this

谢谢大家!

最佳答案

好的。我终于设法通过使用只有一行和两个单元格的表格来完成我需要的事情。表格占据整个宽度。第一个单元格的文本是 nowrap 所以它占用了它需要的所有空间。第二个单元格上的文本占据了剩余的空间并根据需要换行并保持对齐。

关于css - 即使第二个 div 溢出,如何并排保持两个内联 block div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11920258/

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