将内联 div 删除到新行 [英] Dropping inline divs to a new line

问题描述

抱歉，我确定这个问题以前有人问过，但如果有的话，请执行以下操作:

我有三个 div，如下图所示，当浏览器窗口缩小时，它会自动将每个 div 放到下一行.我知道如果浏览器是特定大小，我可以使用 @media 命令并分配不同的 css 样式表，但如果我可以让它变得流畅，那就太好了.

之前:

之后:

谢谢！

解决方案

将 div 包裹在容器元素中，例如....

<div id="elem1"></div><div id="elem2"></div><div id="elem3"></div>

然后确保 .wrapper 有一个设置的宽度，很可能是一个百分比.如果它有一个设置的宽度并且内联元素都向左浮动，一旦 .wrapper div 内不再有空间，它们将移到下一行.

Sorry, I'm sure this question has been asked before, but if there anyway to do the following:

I have three divs in-line like the diagram shown below, when the browser window is shrunk it automatically drops each div to the next line. I know that I could use the @media command and assign a different css stylesheet if the browser is a certain size, but it would be great if I could make it fluid.

Before:

After:

Thank you!

解决方案

Wrap the divs in a container element, like....

<div class="wrapper">
     <div id="elem1"></div>
     <div id="elem2"></div>
     <div id="elem3"></div>
</div>

Then make sure .wrapper has a set width, most likely a percentage. If it has a set width and the inline elements are all floated left, once there is no longer room within the .wrapper div, they'll shift to the next line.

这篇关于将内联 div 删除到新行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！