将两个动态宽度的Div在同一线和中心对中

Question

好的,如果这是重复,我道歉 - 但我无法在任何地方找到任何有效的答案.

我希望有两个div(每个50%宽度)并排......所以左边和右边 - 内容div的内部(see photo below).

我希望他们的最小宽度为300px,一旦页面小于600px(这两个div都将达到他们的分钟)我想要divs包装..所以一个在另一个上面.

我试图在这里做到这一点:小提琴, 但我遇到了问题.

这正是我想要的:

Answer 1

你为自己做的事情很难!使用inline-blocks 可以快速轻松地完成此操作.有一个很好的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元素都由顶部对齐,因此它们处于更愉快的模式.这只是在使用内联块时要记住的另一个小怪癖.我知道看起来很多东西只是为了这个简单的东西而修复,但与你使用的其他选项相比,这inline-block是最简洁,最简单的方法.(虽然如果你愿意,jshanley使用浮动元素提供了一个非常好的选择)

此外,因为这些孩子现在被视为文本,当窗口变得太小时,他们会自动重新定位!无需媒体查询.好极了.

祝好运.