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

Question

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

我想要并排两个div（每个50％宽度）......所以左边和右边 - 内容div (see photo below)内部。

我希望他们的最小宽度为300px，一旦页面小于600px（这两个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元素都由顶部对齐，因此它们处于更愉快的模式。这只是在使用内联块时要记住的另一个小怪癖。我知道有很多事情需要解决这个简单的事情，但与使用inline-block的其他选项相比，这是最简洁，最简单的方法。 （虽然如果你愿意，jshanley提供了一个使用浮动元素的非常好的选择）

另外，因为这些孩子现在被视为文本，当窗口变得太小时，他们会自动重新定位！无需媒体查询。耶。

祝你好运。

Answer 2

您可以使用块元素，并将.left和.right向左浮动，而不是使用导致某些大小调整怪癖的内联块，而每个元素的宽度为50%。

然后为了使它们堆叠，你需要做一些计算。由于您指定了包装为页面宽度的80%，并且内容的断点位于600px（每个元素为300px），因此页面的断点将位于{{1}因为750的80％是600.

您可以制作仅在页面宽度小于750px时应用样式的媒体查询，并将750px和.left设置为宽度100％以使其堆叠。

.right

实施起来非常简单，效果很好，这里是fiddle。

Answer 3

我认为@jshanley和@emn178的答案都可以解决问题，但我想指出一些事情：

display：inline-block; css属性不适用于 float：right ，也不适用于 float：left ，因为当您使用时它的float属性，它总是自动将display属性设置为block。

既然你这样做了：

.right{
   min-width:100px;
   background-color:purple;
   height:100%;
   margin-left:50%;
   display:inline-block;  
}

display：inline-block; 属性无效。

Answer 4

left和right可以采用相同的布局，因此我添加了一个类block。
要使用float:left和width:50%，它应该有效。

http://jsfiddle.net/emn178/mzbku/7/

我添加媒体查询，应该是你想要的 但是你需要计算如何设置大小。