让divs在响应性站点中并排坐

Question

我想为我的请求开场白，为我已经问过的问题道歉；我已经尝试了很多我见过的建议，但是没有成功地让我的代码开始工作。

关于我的问题:我试图让四个div在我的Wordpress站点上尽可能地并排放置，从屏幕宽度为1030 or或更小的时候开始。我的布局是响应性的，我的div是300 be宽，所以如果它们会破坏它们的容器(也就是说，如果容器的宽度是340 be，我不希望div彼此相邻；我希望看到div相互叠在一起)。如果容器的宽度为800 2x2，我需要一个由div组成的2x2网格)。

我的站点(div是绿色块)：http://coolnewssite.com/

divs的Html (“侧栏”是容器)：

<aside id="sidebar" class="span4">
<div class="widget-area" role="complementary">
    <aside id="text-18" class="widget widget-1 odd default widget_text clearfix">           
            <div class="textwidget">
                <a href="http://www.google.com"><img src="http://coolnewssite.com/wp-content/uploads/2014/02/SampleAd.jpg"></a>
            </div>
    </aside>
    <aside id="text-3" class="widget widget-2 even default widget_text clearfix">             
            <div class="textwidget">
                <a href="http://www.google.com"><img src="http://coolnewssite.com/wp-content/uploads/2014/02/SampleAd.jpg"></a>
            </div>
    </aside>
    <aside id="text-17" class="widget widget-3 odd default widget_text clearfix">           
            <div class="textwidget">
                <a href="http://www.google.com"><img src="http://coolnewssite.com/wp-content/uploads/2014/02/SampleAd.jpg"></a>
            </div>
    </aside>
    <aside id="text-19" class="widget widget-4 even default widget_text clearfix">          
            <div class="textwidget">
                <a href="http://www.google.com"><img src="http://coolnewssite.com/wp-content/uploads/2014/02/SampleAd.jpg"></a>
            </div>
    </aside>
</div>
</aside>

有什么线索能说明怎么安排吗？我试过摆弄显示器:内联块和浮动:左，但到目前为止，没有运气。提前感谢您的帮助！

Answer 1

在断点，您希望它们并排坐着，尝试以下操作：

// This will tell the sidebar to be full-width rather than the set 300px
aside#sidebar {
    width:100%;
}

.widget {
    // This sets the max-width of the ad area to 50%
    max-width: 50%;
    // This tells the browser to put the border and any padding inside the max-width
    box-sizing: border-box;
    // This will sit the elements next to each other
    float: left;
}

.textwidget {
   // This overrides the 300px width on the inner div 
   width: auto;
}