Javascript 将两个动态宽度div居中于同一直线上，并

好吧，如果这是重复的话，我很抱歉，但是我在任何地方都找不到任何有效的答案

我想有两个div（每个50%的宽度）并排。。。因此，内容div的左侧和右侧内部

（见下图）

我希望它们的最小宽度为300px，一旦页面小于600px（即两个div都将达到其最小值），我希望将div打包。。所以一个在另一个之上

我在这里试过这样做，但我遇到了问题

这正是我想要的：

---

你把事情弄得一团糟！这可以通过

内联块

s快速轻松地完成。祝你愉快

让我们解释一下代码：

.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之间将有一个恼人的间隙，不能用边距消除

但是，添加

字体大小：0可消除此间隙。这很奇怪，然后您必须为您的子元素指定字体大小，但为了便于使用，这是非常值得的

但仍然存在一个问题——蓝色元素被向下推，而不是在顶部齐平。这可以通过
垂直对齐：文本顶部这将确保所有Div元素都由顶部对齐，因此它们以更舒适的模式排列。这只是使用内联块时要记住的另一个小怪癖。我知道，仅仅为了这么简单的事情，似乎有很多事情需要解决，但与其他选项相比，使用
内联块
是最干净、最简单的方法。（如果您愿意，jshanley提供了一个使用float元素的非常好的替代方案）


此外，由于这些子项现在被视为文本，因此当窗口变得太小时，它们将自动重新定位自己！不需要媒体查询。耶

祝你好运。
左
和
右
可以有相同的布局，所以我添加了一个类
块


要使用
float:left
和
width:50%
，它应该可以工作


我添加了媒体查询，它应该是您想要的。

但是您需要计算如何设置大小。
您可以使用块元素，并将
.left
和
.right
浮动到左侧，而不是使用内联块，因为内联块会导致一些大小调整的怪癖

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

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

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

它的实现非常简单，并给出了一个很好的结果，以下是答案。
我认为@jshanley和@emn178的答案都能起到作用，但我想指出一点：

显示：内联块css属性不适用于float:right或float:left，因为当您使用float属性时，它总是自动将显示属性设置为block

既然你这么做了：

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

显示：内联块属性不起作用。
您应该快速搜索
媒体查询
。此外，您在第一个问题上获得+5的赞成票真是太幸运了。发布图片图的人是我的最爱。这不会相应地将宽度更改为50%，因为元素是浮动的，
50%
值是多余的。您尝试实现了我在发布后3分钟的回答中给出的相同750px媒体查询，但您破坏了您的示例，因为在应用媒体查询时，它会弹出一个滚动条，而不是显示紫色元素。我给你-0.25分，因为你试图把它当作你自己的想法，给你-0.75分，因为亚历山大的评论，而不是你的答案，仍然没有得到想要的结果。很容易找到750号。当我在JSFIDLE中编写示例时，您正在发布您的答案。就在同一时间。媒体查询是正常的响应方式，而不是您的。每个人都可以用。好吧，我给你四分之一分。不幸的是，除了我的回答之外，我还必须找到-1个好的选择。无论哪种方式，我们都会遇到怪癖和额外的规范，但有选择总是好的。@AlexanderLozada是的，我想当你浮动元素时，你需要担心clearfix和所有那些jazz，所以这实际上归结为个人偏好，或者哪种方法对网站的其他内容更好？这个回答似乎也很有效，但我担心浮动会因为“clearfix和所有那些爵士乐”（lol！）而出现问题，因为我也不知道这会起什么作用。。。我真的很感激你的回答，但因为我是一个没有经验的程序员，我认为亚历山大的回答会对我有更多帮助+1仍然。@user3558711是的，个人偏好。很高兴我们为您找到了一个解决方案。这可能更适合作为一个注释，因为您并不特别回答OP的问题。我确实认为这是一个可行的方法，有一点小麻烦，您必须进入并重新调整内部元素的文本回到
左侧
，如果您想在其中使用常规文本。但是正如你所说的，有多种呈现方式是很好的，特别是因为网站的其他内容可能会使一种或另一种方式变得不可能。和+1来演示字体大小的解决方法。很奇怪，这个答案确实有效。我的问题是，因为我对编码是新手，我该如何制作粉色内容