Question

我想通过道歉提出已经被问过的问题来提出我的要求;我已经尝试了很多我见过的建议，并且没有成功地让我的代码工作。

在我的问题上：我正试图在屏幕宽度为1030px或更小的时候，在我的Wordpress网站上尽可能地让四个div并排放置。我的布局是响应式的，我的div是300px宽，所以我不希望它们彼此相邻，如果它们会破坏它们的容器（即如果容器的宽度是340px，我不希望div是下一个彼此之间;我想看到div堆叠在一起。如果容器的宽度是800px，我想要一个2x2的div网格）。

我的网站（div是绿色区块）：http://coolnewssite.com/

div的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;
}

让divs并排放在响应式网站中

1 个答案: