当窗口变小时，Div不是内联的？

时间：2017-06-06 14:37:25

标签： html css responsive-design

我和几个div有一个小问题。我设置了5个不同颜色的div，当窗口大小缩小时，div逐个下降。有没有办法可以让它们之间的空间缩小，所以它们会越来越接近？

再次感谢你们

＆＃13;
＆＃13; 
p {
  margin: 0;
}

.pageColourOn {
  border: 2px solid #e1dfe1;
  border-radius: 5px;
  background-color: #fff;
  width: 100%;
  height: 155px;
  margin-top: 50px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.pageColourOff {
  display: none;
}

#pageName {
  background-color: #f5f0f5;
  border-bottom: 2px solid #e1dfe1;
}

#pageName p {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
  color: #565656;
  font-weight: bold;
}

.bg01Off {
  background-color: #80b3ff;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 4%;
  margin-right: 4%;
  display: inline-block;
}

.bg02Off {
  background-color: #afe9af;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 4%;
  margin-right: 4%;
  display: inline-block;
}

.bg03Off {
  background-color: #ffb380;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 4%;
  margin-right: 4%;
  display: inline-block;
}

.bg04Off {
  background-color: #ffaaaa;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 4%;
  margin-right: 4%;
  display: inline-block;
}

.bg05Off {
  background-color: #eeaaff;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 4%;
  margin-right: 4%;
  display: inline-block;
}

.center {
  text-align: center;
}
＆＃13; 
<div class="pageColourOn" id="pageColour">
  <div id="pageName">
    <p>Colour</p>
  </div>
  <div class="center">
    <div id="bg01" class="bg01Off">
    </div>
    <div id="bg02" class="bg02Off">
    </div>
    <div id="bg03" class="bg03Off">
    </div>
    <div id="bg04" class="bg04Off">
    </div>
    <div id="bg05" class="bg05Off">
    </div>
  </div>
＆＃13;
＆＃13;
＆＃13;

6 个答案:

答案 0 :(得分：0)

添加媒体查询，以便在一定宽度的屏幕后，元素将获得一个百分比底部，即百分比而不是px。

答案 1 :(得分：0)

使用媒体查询使元素响应视口宽度的变化，例如：

body {
background-color: lightgreen;
     }

@media only screen and (max-width: 500px) {
body {
    background-color: lightblue;
    }
}

当视口宽度低于500像素时，这会使背景颜色发生变化。您可以使用与div的宽度相同的概念。

**另外，请查看Bootstrap。 Bootstrap可以使用网格系统轻松定义元素的宽度。您正在尝试使您的网站“响应”，这是Web开发中的一个众所周知的概念。 Bootstrap已经为此问题创建了一个库。它使用媒体查询来完成它。值得深入了解媒体查询，但需要快速修复，研究引导程序。

答案 2 :(得分：0)

您可以将规则放在媒体查询中，以减少边距，例如我的示例（最后一条规则）：

＆＃13;
＆＃13; 
ODEMPTY = pandas.read_csv('OD_Empty_unduplicated.csv')
ODNEW = pandas.read_csv('OD_Out.csv')

ODNEW = ODNEW.append(ODEMPTY)

wb = openpyxl.load_workbook('cm2011.xlsx')
sheet = wb.get_sheet_by_name('Sheet1')

for i in range(len(ODNEW)):
   sheet['A'+ str(i+1)].value = ODNEW['comm'][i] # start writing on A1 not A0
   sheet['B'+ str(i+1)].value = ODNEW['ONode'][i]
   sheet['C'+ str(i+1)].value = ODNEW['DNode'][i]
   sheet['D'+ str(i+1)].value = ODNEW['quantity'][i]
   sheet['E'+ str(i+1)].value = ODNEW['startRR'][i]
＆＃13; 
  p {
  margin: 0;
}

.pageColourOn {
  border: 2px solid #e1dfe1;
  border-radius: 5px;
  background-color: #fff;
  width: 100%;
  height: 155px;
  margin-top: 50px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.pageColourOff {
  display: none;
}

#pageName {
  background-color: #f5f0f5;
  border-bottom: 2px solid #e1dfe1;
}

#pageName p {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
  color: #565656;
  font-weight: bold;
}

.bg01Off {
  background-color: #80b3ff;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 4%;
  margin-right: 4%;
  display: inline-block;
}

.bg02Off {
  background-color: #afe9af;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 4%;
  margin-right: 4%;
  display: inline-block;
}

.bg03Off {
  background-color: #ffb380;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 4%;
  margin-right: 4%;
  display: inline-block;
}

.bg04Off {
  background-color: #ffaaaa;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 4%;
  margin-right: 4%;
  display: inline-block;
}

.bg05Off {
  background-color: #eeaaff;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 4%;
  margin-right: 4%;
  display: inline-block;
}

.center {
  text-align: center;
}

@media screen and (max-width: 760px) {
  .bg01Off,
  .bg02Off,
  .bg03Off,
  .bg04Off,
  .bg05Off {
    margin-left: 1%;
    margin-right: 1%;
  }
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

您可以使用表格而不是.center div，并为其指定以下样式：

table {
  width: 100%;
  text-align: center;
}
td {
  width: 20%; /* This is 100/the number of <td>'s you have in the table. */
}

＆＃13;
＆＃13; 
p {
  margin: 0;
}

.pageColourOn {
  border: 2px solid #e1dfe1;
  border-radius: 5px;
  background-color: #fff;
  width: 100%;
  height: 155px;
  margin-top: 50px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.pageColourOff {
  display: none;
}

#pageName {
  background-color: #f5f0f5;
  border-bottom: 2px solid #e1dfe1;
}

#pageName p {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
  color: #565656;
  font-weight: bold;
}

.bg01Off {
  background-color: #80b3ff;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  display: inline-block;
}

.bg02Off {
  background-color: #afe9af;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  display: inline-block;
}

.bg03Off {
  background-color: #ffb380;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  display: inline-block;
}

.bg04Off {
  background-color: #ffaaaa;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  display: inline-block;
}

.bg05Off {
  background-color: #eeaaff;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  display: inline-block;
}
table {
  width: 100%;
  text-align: center;
}
td {
  width: 20%;
}
＆＃13; 
<div class="pageColourOn" id="pageColour">
  <div id="pageName">
    <p>Colour</p>
  </div>
  <table>
    <tr>
      <td>
        <div id="bg01" class="bg01Off">
        </div>
      </td>
      <td>
        <div id="bg02" class="bg02Off">
        </div>
      </td>
      <td>
        <div id="bg03" class="bg03Off">
        </div>
      </td>
      <td>
        <div id="bg04" class="bg04Off">
        </div>
      </td>
      <td>
        <div id="bg05" class="bg05Off">
        </div>
      </td>
    </tr>
  </table>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

将容器center更改为具有以下属性的Flexbox：

.center {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 4%
}


p {
  margin: 0;
}

.pageColourOn {
  border: 2px solid #e1dfe1;
  border-radius: 5px;
  background-color: #fff;
  width: 100%;
  height: 155px;
  margin-top: 50px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.pageColourOff {
  display: none;
}

#pageName {
  background-color: #f5f0f5;
  border-bottom: 2px solid #e1dfe1;
}

#pageName p {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
  color: #565656;
  font-weight: bold;
}

.bgOff {
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  display: inline-block;
}

.bg01Off {
  background-color: #80b3ff;
}

.bg02Off {
  background-color: #afe9af;

}

.bg03Off {
  background-color: #ffb380;
}

.bg04Off {
  background-color: #ffaaaa;
}

.bg05Off {
  background-color: #eeaaff;
}

.center {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 4%
}
<div class="pageColourOn" id="pageColour">
  <div id="pageName">
    <p>Colour</p>
  </div>
  <div class="center">
    <div id="bg01" class="bgOff bg01Off">
    </div>
    <div id="bg02" class="bgOff bg02Off">
    </div>
    <div id="bg03" class="bgOff bg03Off">
    </div>
    <div id="bg04" class="bgOff bg04Off">
    </div>
    <div id="bg05" class="bgOff bg05Off">
    </div>
  </div>

答案 5 :(得分：0)

您可以删除剩余边距＆amp;正确并在.center上使用flexbox，如下所示：

＆＃13;
＆＃13; 
p {
  margin: 0;
}

.pageColourOn {
  border: 2px solid #e1dfe1;
  border-radius: 5px;
  background-color: #fff;
  width: 100%;
  height: 155px;
  margin-top: 50px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.pageColourOff {
  display: none;
}

#pageName {
  background-color: #f5f0f5;
  border-bottom: 2px solid #e1dfe1;
}

#pageName p {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
  color: #565656;
  font-weight: bold;
}

.bg01Off {
  background-color: #80b3ff;
}

.bg02Off {
  background-color: #afe9af;
}

.bg03Off {
  background-color: #ffb380;
}

.bg04Off {
  background-color: #ffaaaa;
}

.bg05Off {
  background-color: #eeaaff;
}

.bg05Off, .bg04Off, .bg03Off, .bg02Off, .bg01Off {
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  display: inline-block;
}

.center {
  display: flex;
  justify-content: space-around;
}
＆＃13; 
<div class="pageColourOn" id="pageColour">
  <div id="pageName">
    <p>Colour</p>
  </div>
  <div class="center">
    <div id="bg01" class="bg01Off">
    </div>
    <div id="bg02" class="bg02Off">
    </div>
    <div id="bg03" class="bg03Off">
    </div>
    <div id="bg04" class="bg04Off">
    </div>
    <div id="bg05" class="bg05Off">
    </div>
  </div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题