Question

即使在将窗口大小调整到最小尺寸之后，我还需要让下面的两个div保持在同一行（如表格）。

<div id="wrapper" style="">
    <div id="div1" style="display:inline-block;">
        <p>this is div one. this should remain in  same line with div 2 even after resizing the window.</p>
    </div>

    <div id="div2" style="display:inline-block">
        <p>this is div two. this should remain in  same line with div 1 even after resizing the window.</p>
    </div>
</div>

Answer 1

使用display:flex包装，它将完成工作

＆＃13;

<div id="wrapper" style="display:flex">
<div id="div1">

<p>this is div one. this should remain in  same line with div 2 even after resizing the window.</p>
</div>
<div id="div2">
<p>this is div two. this should remain in  same line with div 1 even after resizing the window.</p>
</div>
</div>

＆＃13;

Answer 2

使用当前设置只需为div添加宽度。这将使得div彼此相邻。

<div id="wrapper">
    <div id="div1" style="width:50%; display:inline-block;">
        <p>this is div one. this should remain in  same line with div 2 even after resizing the window.</p>
    </div>

    <div id="div2" style="width:50%; display:inline-block">
        <p>this is div two. this should remain in  same line with div 1 even after resizing the window.</p>
    </div>
</div>

最好使用CSS类而不是内联CSS。您还可以使用CSS flexbox。

Div部分在同一行

2 个答案: