javascript - 将两个动态宽度的 div 在同一行上居中并

Question

好的，如果这是重复的，我深表歉意 - 但我无法在任何地方找到任何有效的答案。

我想要并排放置两个 div(每个宽度为 50%)...所以一个左边和一个右边 - 在内容 div 的内部 (见下图)。

我希望它们的最小宽度为 300 像素，一旦页面小于 600 像素(这是两个 div 都将达到它们的最小宽度时)，我想将 div 换行..所以一个在另一个之上。

我已尝试在此处执行此操作:fiddle但我遇到了问题。

这正是我想要的:

Answer 1

你在给自己找麻烦!这可以通过 inline-block 快速轻松地完成。祝你愉快JSfiddle .

让我们解释一下代码:

.wrapper
{
    text-align: center;   /* specifies that the inline-blocks (which are treated 
        like text here) will be centered. */

    font-size: 0;  /* Explained later */
    max-width: 1000px;  /* Your desired max-width */
    position: relative;  /* These two lines center your wrapper in the page. */
    margin: 0 auto;
}

现在对于内部 50% 元素:

.left, .right{
    display: inline-block;  /* This will treat these divs like a text element.  
       This will work with the parent's "text-align: center" to center the element. */

    min-width: 300px;
    width: 50%;
    font-size: 16px;  /* Explained below */
    vertical-align: text-top;   /* Explained below */
}

您可能想知道为什么包含 font-size。这是因为这种方法有一点怪癖——如果字体大小保持默认，div 之间会有一个恼人的间隙，不能用边距消除。

但是，将 font-size: 0; 添加到父元素可以消除这种差距。这很奇怪，然后您必须为您的子元素指定字体大小，但为了易用性，这是非常值得的。

但是还有一个问题 - 蓝色元素被向下推，并且没有在顶部齐平。这可以通过 vertical-align: text-top; 来补救，这将确保所有 Div 元素都按顶部对齐，因此它们以更令人愉悦的模式放置。这只是使用内联 block 时要记住的另一个小怪癖。我知道仅仅为了这么简单的事情似乎需要解决很多问题，但与使用 inline-block 的其他选项相比，这是最干净、最简单的解决方法。 (尽管如果您愿意，jshanley 提供了一个使用 float 元素的非常好的替代方案)

此外，因为这些 child 现在被视为文本，所以当窗口太小时它们会自动重新定位!不需要媒体查询。是的。

祝你好运。