css - 不居中且不符合内容的并排 div

Question

我想在 wordpress 主题中并排放置两个 div。 slider 在一侧(左)，将成为此类横幅的三个图像在另一侧(右)。

我遇到的问题是 (1) div 不会居中，(2) 在较大的显示器上 div 不符合内容。我想最好的描述方式是它们在保持响应的同时不会随内容崩溃。因此，如果我将 div 宽度作为百分比来保持响应，则 div 不会折叠，但如果我将 div 的宽度设置为自动，它们就会符合内容。

这是我的网站 http://jesuspeople.personalityweb.com/这样你就可以明白我在说什么了。这是我的 div 的 CSS

.mydiv{
position: relative;
display:inline-block;
/*position: absolute;*/
width: 100%;
margin-left: auto;
margin-right: auto;
height: auto !important;
/*height: 650px !important;*/
/*border: thin solid red;*/
background-image: url("http://jesuspeople.personalityweb.com/
wp-content/uploads/2016/10/gradient-new-2.jpg");
background-repeat:repeat-x;
overflow: hidden;
/*  z-index:-1;*/

}

这是我在 div 页面上的代码

<div class='mydiv'>";
echo "<div style='float:left; width: 75%'>"; 
echo page_slider();
echo"</div><div style='float:right; width: 25%'>
<img src='http://jesuspeople.personalityweb.com/wpcontent/uploads/2016
/10/partner-with-us-1.jpg' />
<img src='http://jesuspeople.personalityweb.com/wp-content/
uploads/2016/10/prophetic-corner-1.jpg' />
<img src='http://jesuspeople.personalityweb.com/wp-
content/uploads/2016/10/miracle-testimonies-1.jpg' />
</div>";
echo"</div>";

Answer 1

你使用的是非常古老的 Bootstrap ，所以你应该遵循它的网格结构，如下所示，这将有助于你的内容对齐

<div class='container'>";

echo "<div class='row';
echo "<div class='span8'; 
echo page_slider();
echo"</div><div class='span8'>

<img src='http://jesuspeople.personalityweb.com/wpcontent/uploads/2016
/10/partner-with-us-1.jpg' />
<img src='http://jesuspeople.personalityweb.com/wp-content/
uploads/2016/10/prophetic-corner-1.jpg' />
<img src='http://jesuspeople.personalityweb.com/wp-
content/uploads/2016/10/miracle-testimonies-1.jpg' /></div>";

echo"</div></div>";