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

根据您的代码，两个div都有40％的宽度，这意味着总共80％。此外，5％的保证金意味着5 * 4 = 20％。所以总数在这里变为100％。在你的第二个div中它还有5％的利润率迫使它突破（100％+ 20％）没有更多的空间。您需要从margin:5%;删除.firstcolumn。

选中此fiddel

Answer 2

从margin:5%;班级中移除.firstcolumn。

<强> Demo here

更新回答

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

<强> Demo Here

有2个响应的Divs并排

2 个答案: