Question

我试图获取下面带有文字的图片行，以便在屏幕宽度变小时做出响应。试图从3行4行，到4行3行，6行2行，到单行。

这是正确的CSS吗？需要添加的响应元素是什么？

<li class="body-members">
<div class="bios">
    <div class="module" alt="The League">
        <div class="picture-holder">
            <div class="picture"> 
                <img src="#"/><ol><li>Name</li><li>Row2 text</li><li>row3 text</li></ol>
            </div>  
            <div class="picture"> 
                <img src="#"/><ol><li>Name</li><li>Row2 text</li><li>row3 text</li></ol>
            </div>  
            <div class="picture"> 
                <img src="#"/><ol><li>Name</li><li>Row2 text</li><li>row3 text</li></ol>
            </div>  
            <div class="picture"> 
                <img src="#"/><ol><li>Name</li><li>Row2 text</li><li>row3 text</li></ol>
            </div>  
            <div class="picture"> 
                <img src="#"/><ol><li>Name</li><li>Row2 text</li><li>row3 text</li></ol>
            </div>  
            <div class="picture"> 
                <img src="#"/><ol><li>Name</li><li>Row2 text</li><li>row3 text</li></ol>
            </div>
            <div class="picture"> 
                <img src="#"/><ol><li>Name</li><li>Row2 text</li><li>row3 text</li></ol>
            </div>
            <div class="picture"> 
                <img src="#"/><ol><li>Name</li><li>Row2 text</li><li>row3 text</li></ol>
            </div>
            <div class="picture"> 
                <img src="#"/><ol><li>Name</li><li>Row2 text</li><li>row3 text</li></ol>
            </div>      
            <div class="picture"> 
                <img src="#"/><ol><li>Name</li><li>Row2 text</li><li>row3 text</li></ol>
            </div>
            <div class="picture"> 
                <img src="#"/><ol><li>Name</li><li>Row2 text</li><li>row3 text</li></ol>
            </div>
            <div class="picture"> 
                <img src="#"/><ol><li>Name</li><li>Row2 text</li><li>row3 text</li></ol>
            </div>
        </div>
    </div>
</div>

CSS：

.picture {
height: 320px;
float: left;
list-style-type: none;
text-align: center;
width: 25%;
display: block;
vertical-align: center;
}
.bios {
width: 100%;}
.module {
width: 75%;
display: block;
margin: 0 auto;}



 .picture-holder {
width: 100%;
display: block;}

.picture img {
display: block;
border-radius: 50%;
border-color: white;
border-width: 5px;
margin: 0 auto;}

.picture ol {
padding-top: 10px;
list-style-type: none;
text-align: center;}

Answer 1

实现这一目标的最简单方法是使用＆＃39; float＆＃39;属性。将每个图像及其相关标题放在div中。使用CSS规则＆＃39; float：left＆＃39;在每个div上。随着屏幕宽度变小，div会自行重新排列，以便它们不会重叠。

如果要控制每行中的图像数量，请使用媒体查询根据屏幕宽度设置主div的大小。例如。 @media screen and (min-width: 801px) and (max-width: 720px)。

您应该阅读float和@media用法，因为该主题有很多。

从4连续拍摄一排照片到3到2对1

1 个答案: