在同一行上居中两个动态宽度的div

Question

好的，如果这是一个重复问题，我很抱歉-但我无法在任何地方找到有效的答案。

我想要两个div（每个宽度为50％）并排放置…左边和右边-在内容div内（请参见下面的照片）。

我希望他们的最小宽度为300px，一旦页面变得小于600px（即两个div都达到其最小值时），我希望divs换行..所以其中一个在另一个上面。

我试图在这里实现：fiddle 但是遇到了问题。

这里是我想要的：

- Zach

---

请搜索“媒体查询（media query）”。 - Daniel Cheung

另外，你的第一个问题得到了+5的赞，真是好运气。我最喜欢那些发布图片图解的人了。 - Alexander Lozada

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。 这是因为这种方法有一个小问题-如果字体大小保持默认值，则

之间将有一个烦人的间隙，无法通过margin消除。

但是，在父元素中添加font-size：0;可消除此间隙。 这很奇怪，然后您必须指定子元素的字体大小，但是这样做非常值得，因为使用起来非常方便。

但仍存在一个问题-蓝色元素被推下，并且与顶部不齐。 这可以通过vertical-align: text-top;解决。 这将确保所有Div元素都按顶部对齐，因此它们排列在更愉快的模式中。 这只是使用inline-block时要记住的另一个小问题。 我知道这似乎需要修复很多事情才能实现这么简单的东西，但与您的其他选项相比，使用inline-block是最干净，最简单的方法。(虽然如果您喜欢，jshanley提供了一种非常好的使用浮动元素的替代方法)

此外，由于这些子元素现在像文本一样处理，因此当窗口变得太小时，它们将自动重新定位！不需要媒体查询。耶！

祝你好运。

- Alexander Lozada

---

我认为这是一种可行的方法，只是有一个小烦恼，如果你想在里面放置常规文本，你必须进去重新对齐内部元素的文本到“left”。但正如你所说，有多种方式呈现是很好的，特别是因为网站的其余内容可能会使其中一种方法不可能。并且+1展示了解决字体大小问题的解决方法。 - jshanley

显然，这个答案是有效的。我的问题是，由于我是编程新手，我该如何使粉色内容部分仅与其包含的内容一样高？（可能是一个愚蠢的问题...）@AlexanderLozada - Zach

@user3558711 - 哎呀，我的错。只需从容器中删除“height”属性，它就会变得与内容一样高。JSfiddle- http://jsfiddle.net/mzbku/8/ - Alexander Lozada

Answer 2

为了避免使用inline-block引起的尺寸问题，您可以使用块元素，并将.left和.right浮动到左侧，使每个元素的宽度都为50%。

然后，要使它们堆叠，您需要进行一些计算。由于您指定的包装器宽度为页面宽度的80％，并且内容的断点为600px（每个元素300px），因此页面的断点将在750px处，因为750的80％为600。

您可以创建一个媒体查询，仅在页面宽度小于750px时应用样式，并将.left和.right设置为宽度100％以使它们堆叠。

@media only screen and (max-width: 750px) {
    .left, .right {
        width: 100%;
    }
}

这个实现非常简单，效果也很好。这里提供了示例代码。

- jshanley

---

很好的替代方案。无论如何，我们都会遇到一些怪癖和额外的规范，但拥有选择总是很好的。 - Alexander Lozada

@AlexanderLozada 是的，我想当你浮动元素时，你需要关注clearfix和所有那些爵士乐，所以这实际上归结为个人偏好，或者哪种方法与站点其他内容相处得更好。 - jshanley

这个回答似乎也可以，但我担心浮点数会因为“clearfix和所有那些爵士乐”（哈哈！）而出现问题，因为我也不知道那是什么... 我非常感谢这个回答，但因为我是一个经验不足的编码人员，我认为亚历山大的回答会更有帮助。还是+1。 - Zach

@user3558711 是的，这是个人偏好。很高兴我们为您找到了解决方案。 - jshanley

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;属性没有起到任何作用。

- goerwin

---

这可能更适合作为评论，因为您并没有特别回答OP的问题。 - Alexander Lozada

Answer 4

left和right可能具有相同的布局，因此我添加了一个类block。
使用float:left和width:50%，应该可以正常工作。

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

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

- emn178

---

由于该元素是浮动的，因此它不会响应式地将宽度更改为50％，使“50％”值变得多余。 - Alexander Lozada

你在我回答发布3分钟后尝试实现相同的750px媒体查询，但是你破坏了你的示例，因为现在它会出现滚动条而不是在应用媒体查询时显示紫色元素。我会给你-0.25分，因为你试图将其作为自己的想法通过，另外-0.75分因为你仍然没有得到期望的结果。 - jshanley

我更新了，是因为Alexander的评论，而不是你的回答。获取数字750很容易。当我在jsfiddle中编写示例时，你正在发布你的答案。这只是同时发生的事情。媒体查询是响应式设计的常规方式，不是你的专利。任何人都可以使用它。 - emn178

好的，我会把四分之一的点数还给你。不幸的是，我仍然必须舍入到-1。 - jshanley