html - 有 2 个响应式 Divs 并排

Question

所以基本上我试图制作一个包含 2 个响应列的页面，并排大小相同，而不是使用 px 进行测量，我使用百分比调整它们的大小。无论我做什么，将两个 div 设置为 5% 的边距和 40% 的宽度，它们应该并排放置在带有“display: inline-block”的容器中。但出于某种原因，它不是。

这是演示我的问题的 J-Fiddle。我在我正在处理的页面上的这些 div 的上方和下方都有内容...因此它们无法干扰，使用、声明 float 位置似乎只会使事情进一步复杂化。

http://jsfiddle.net/avh9s6pa/

如果你们能提供帮助，我将不胜感激。毫无疑问，这会很简单，但这让我抓狂。

.post-reg-columns {
    width: 100%;
    display:block;

}

.firstcolumn {
    display: inline-block;
    max-width: 40%;
    margin:5%;
    padding:10px;


}

.firstcolumn button {

    color: #fff;
    background-color: #6496c8;
    text-shadow: -1px 1px #417cb9;
    border: none;
    font-size: 1.4em;
    font-family: 'Bree Serif', serif; 
    font-weight:bold;
    width: 100%;
    padding:15px;

}

.firstcolumn button:hover {
    background-color: #416386;

    }

.secondcolumn {
    display: inline-block;
    background:#fff7ca;
    max-width: 40%;
    margin:5%;
    padding:10px;

}



<div class="post-reg-columns">
        <div class="firstcolumn">
            <div class="title2"> Basic Listing </div>
            <a href="http://google.com"><button>Test Button</button></a>
            ewfwefw efwefwefw fwefwef wefwefwef wefwefwe fwefwef wefefw efwe fefwefwefw eiofj erio jweriojgjphi owriog jerioj gerijg ejfwefwef wefj weijfwe jfjiw efjwej wef weijf hello this is a test blah blah blah! My name is Chris Mayberry and this is a test
        </div>  

        <div class="secondcolumn">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod sollicitudin magna, sed placerat dui pretium quis. Vivamus sit amet velit nisi. Etiam consectetur mauris ligula, id fermentum felis fermentum ac. Phasellus pharetra a lorem ac dictum. Nullam vitae tempor ex. Mauris in vehicula augue. Maecenas sit amet porttitor enim, eu vehicula orci. Aliquam id nisl non sem mattis varius in sed nulla. Nulla ultrices fringilla erat, vitae tincidunt turpis malesuada vitae. Cras vehicula ex at arcu eleifend cursus. Sed varius dignissim risus eu fringilla.


        </div> 

    </div>

Answer 1

根据您的代码，两个 div 的宽度均为 40%，这意味着总宽度为 80%。此外，5% margin 意味着 5*4 =20%。所以总计在这里变成 100%。在你的第二个 div 中，它也有 5% 的边距，这迫使它中断，因为 (100%+20%) 没有更多的空间。您需要从 .firstcolumn 中删除 margin:5%;。

检查这个fiddel