Question

我遇到了一个无法解决的问题。我试图在80％宽度的父div中自动居中多个150x150px div（但也可能是90％或100％）。我有一个同位素JQuery附加工作正常，但当我放大我的导航窗口，孩子divs不移动，而且，他们不“居住”中心（上面的菜单工作正常）。

这是html代码：

<div class="portfolioContainer">
  <div id="marque" class="interieur">
    <p class="categorie"><a href="http://www.arper.it" target="_blank">
    <img src="images/logo_arper_140_Noir.jpg" width="100" height="33"></a><br>
    <span class="txt">ARPER</span><br>
    MOBILIER</p>
  </div>
  <div id="marque" class="interieur exterieur">
    <p class="categorie"><a href="http://www.b-line.it" target="_blank">
    <img src="images/logo_bline_140_Noir.jpg" width="140"></a><br>
    <span class="txt">B-LINE</span><br>
    MOBILIER</p>
  </div>
  <div id="marque" class="audio ipod">
    <p class="categorie"><a href="http://www.bowers-wilkins.fr" target="_blank">
    <img src="images/logo_BW_140_Noir.jpg" width="80" height="33"></a><br>
    <span class="txt">BOWERS &amp; WILKINS</span><br>
    AUDIO</p>
  </div>
  <div id="marque" class="audio">
    <p class="categorie"><a href="http://www.clearaudio.de" target="_blank">
    <img src="images/logo_clearaudio_140_Noir.jpg" width="80" height="74"></a><br>
    <span class="txt">CLEARAUDIO</span><br>
    PLATINES VINYLE</p>
  </div>
</div>

和CSS：

#container {
width:80%;
padding-top:50px;
position:relative;
margin: auto;
text-align:center;
}

p {
width:150px;
margin:0;
padding:0;
position:absolute;
bottom:20px;
text-align:center; /* centrage horizontal */
}

img {
padding-top:5px;
padding-bottom:10px;
}

#marque { 
position:relative;
width: 150px; 
height: 150px; 
margin:2px;
float:left;
border: solid 1px #333;
text-align:center;
}

可以在此地址找到该页面以查看整个html / CSS代码： www.pixsix.fr/marques.html

Answer 1

将float: left替换为display: inline-block

测试它：

#marque { 
position:relative;
width: 150px; 
height: 150px; 
margin:2px;
display: inline-block;
border: solid 1px #333;
text-align:center;
}

中心固定宽度div在可变父div中

1 个答案: