Question

我正在尝试为我的机器人团队网站的页脚创建一个赞助商徽标的“画廊”。使用包装器，每行的div数量可以适当调整以适应显示器的大小。 display: flex <h2 class="sponsor_level" style="color:#EDDA26;">Gold Sponsors</h2> <div class="sponsor_selector" id="wrapper"> <div class="sponsor"><a href="http://www.aacps.org/" target="_blank" ><img src="/wp-content/uploads/2014/08/AACPS-transparent-background.png" alt="AACPS" class="sponsor"></a></div> </div> <h2 class="sponsor_level" style="color:#E5E2E7;">Silver Sponsors</h2> <div class="sponsor_selector" id="wrapper"> <div class="sponsor"><a href="http://www.daly.com/" target="_blank" ><img src="/wp-content/uploads/2014/08/hdr_logo_daly.jpg" alt="Daly Computers" class="sponsor"></a></div> <div class="sponsor"><a href="https://www.leidos.com/" target="_blank" ><img src="/wp-content/uploads/2014/08/Leidos.png" alt="Leidos" class="sponsor"></a></div> <div class="sponsor"><a href="http://umcpf.org/board/homepage.php" target="_blank" ><img src="/wp-content/uploads/2014/08/University-of-Maryland.png" alt="University Of Maryland Foundation" class="sponsor"></a></div> <div class="sponsor"><a href="http://inovexcorp.com/" target="_blank" ><img src="/wp-content/uploads/2014/08/inovex_logo_final_blue_transparent.png" alt="Inovex Information Systems" class="sponsor"></a></div> <div class="sponsor"><a href="http://www.microsoft.com/en-us/default.aspx" target="_blank" ><img src="/wp-content/uploads/2014/08/microsoft.png" alt="Microsoft" class="sponsor"></a></div> <div class="sponsor"><a href="http://www.koonstoyotaannapolis.com/index.htm" target="_blank" ><img src="/wp-content/uploads/2014/08/koons.gif" alt="Koons of Annapolis" class="sponsor"></a></div> <div class="sponsor"><a href="http://www.selbybaymarina.com/" target="_blank" ><img src="/wp-content/uploads/2014/08/selby-bay-marina.jpg" alt="Selby Bay Marina" class="sponsor"></a></div> <div class="sponsor"><a href="http://www.proair-inc.com/" target="_blank" ><img src="/wp-content/uploads/2014/08/pro-air-inc.png" alt="Pro-Air, Inc" class="sponsor"></a></div> <div class="sponsor"><a href="http://www.familyveterinaryclinic.com/" target="_blank" ><img src="/wp-content/uploads/2014/08/family-veterinary-clinic.png" alt="Family Veterinary Clinic" class="sponsor"></a></div> <div class="sponsor"><a href="http://dovernetworks.com/" target="_blank" ><img src="/wp-content/uploads/2014/08/dover_networks_logo.png" alt="Dover Networks LLC" class="sponsor"></a></div> <div class="sponsor"><a href="http://www.koonsford.com/" target="_blank" ><img src="/wp-content/uploads/2014/08/koonsford-logo.png" alt="Koons Ford of Annapolis" class="sponsor"></a></div> </div>正确居中但全部占据相同的线并相互覆盖。无论数量和页面大小如何，我都希望div成为中心。您可以在网站here

上看到以下代码

HTML（两个例子）：

#wrapper {
    width: auto;
    margin: 0 auto 0 auto;
}

.pleft{text-align: left;}

div.sponsor_parent{background-color: #E5E2E7; 
    width: auto;
    margin: 0 auto 0 auto;}

div.sponsor{
    padding:25px;
    width: 300px;
    height: 60px;
    display: inline-block;
}

img.sponsor{
    max-width:300px; 
    width:auto;
    max-height:60px;
    height:auto;
    margin:0px auto 0px auto;
    display: block;
}

.sponsor_level{
    background-color: #435CC8;
    color: #FFFFFF;
    font-family: serpentine;
    width: 300px;
    margin: 0px auto 0px auto;
    border-radius: 22.5px;
    border:3px solid #8BE1B1;
    text-align: center;
    font-weight: bold;
    font-size: 18pt;
}

.sponsor_selector{
    /*display: -webkit-flex;
    display: flex;*/    
    max-width: 1200px;
    min-width: 400px;
    width:auto;
}


.sponsor_selector:before,
.sponsor_selector:after {
    content: " "; 
    display: table;
}

.sponsor_selector:after {
    clear: both;
}

CSS：

import csv

f = csv.reader(open('lmt.csv','rb')) # csv is binary
Date, Open, Hihh, mLow, Close, Volume = zip(*f)

rows = zip(Date, Volume)

ofile = open("MYFILEnew1.csv", "wb")  
writer = csv.writer(ofile)
for row in rows:
    writer.writerow(row) # row is already a tuple so no need to make it a list

ofile.close()

Answer 1

尝试添加和调整这些规则：

div.sponsor_parent {
    background-color: #E5E2E7;
    /* width: auto; */
    /* margin: 0 auto 0 auto; */
    display: flex;
    flex-direction: column;
    align-items: center;
}

div.sponsor_selector {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

将div放在包装器中并在页面缩小时使它们换行

1 个答案: