把两个灵活的div放在一起

本文介绍了把两个灵活的div放在一起的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图创建一个网页，其中有两个彼此相邻的灵活的div。所以当浏览器窗口被压缩在一起，每个div收缩与浏览器的宽度（直到某一点）。我的问题是，使用下面的解决方案，当浏览器窗口变得足够小，div不收缩，而是线只是在它们之间断开...

I am trying to create a web page where there are 2 divs next to each other that are flexible. So that when the browser window is compressed together, each of the divs shrink with the width of the browser (up to a certain point). THe issue that I'm having is that with the solution below, when the browser window gets small enough, the divs dont shrink, instead the line just breaks between them...

我知道我失去了一些简单的...只是不知道是什么：

I know I'm missing somthing simple... just don't know what it is:

<html>
<body>

<div style="border-style:solid;border-color:green;max-width:100%;overflow: hidden;">
  <div style="float:left;border-style:solid;border-color:red;background-color:transparent;padding:15px 30px 0px 30px;min-width:100px;max-width:100%">This is a sample text to fill the space so that it can be looked at in a realistic way.</div>
  <div style="overflow: hidden;float:right;border-style:solid;border-color:yellow;min-width:100px;max-width:100%;max-height:100%;">This is a sample text to fill the space so that it can be looked at in a realistic way.</div>
</div>

<body>
</html>

推荐答案

您可以使用CSS display ：table-cell 属性。这样写：

You can use CSS display:table-cell property for this. Write like this:

.parent{
    display:table;
    width:100%;
}
.parent > div{
    display:table-cell;
    min-width:100px;
    background:red;
}
.parent > .right{
    background:green;
}

检查：

这篇关于把两个灵活的div放在一起的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！