有 2 个响应式 Divs 并排

Question

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

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

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

从 .firstcolumn class 中删除 margin:5%;。

Demo here

更新答案

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

Demo Here

Answer 2

根据您的代码，两个 div 的宽度均为 40%，即总宽度为 80%。此外，5% 保证金意味着 5*4 =20%。所以总计在这里变成 100%。在您的第二个 div 中，它也有 5% 的保证金，这迫使它因为 (100%+20%) 没有更多 space 而中断。您需要从 .firstcolumn.

中删除 margin:5%;

勾选这个fiddel

有 2 个响应式 Divs 并排

Having 2 responsive Divs Side By side

html

css

alignment