Question

我输入了这段代码，我想要连续（水平）的方框，但它看起来像一列（垂直）。我只是希望这些颜色盒水平，它们之间有空格。（如顶层）

前框（灰色），顶部有7个框（带边距和填充）

像这样：4个颜色的盒子放在一个更大的灰色盒子里。

我用过＆＃34; div＆＃34;标签，但它只适用于第一个我怎么能对齐那些盒子并在它们之间留有空格？提前谢谢。

＆＃13;

.header_box {
  width: 100%;
  background: #ccc;
  display: -webkit-box;
}

.box {
  width: 150px;
  height: 40px;
  margin: 20px;
}

.box1 {
  background: white;
}

.box2 {
  background: #ccc;
}

.box3 {
  background: #ccc;
}

.box4 {
  background: #ccc;
}

.box5 {
  background: #ccc;
}

.box6 {
  background: #ccc;
}

.box7 {
  background: #ccc;
}

.middle_box {
  width: 100%;
  background: white;
  display -webkit-box;
  padding: 20px;
}

.box0 {
  width: 150px;
  height: 150px;
  margin: 20px;
  padding: 10px;
}

.box11 {
  background: blue;
}

.box12 {
  background: yellow;
}

.box13 {
  background: red;
}

.box14 {
  background: green;
}

.circle1 {
  height: 100px;
  width: 100px;
  background-color: yellow;
  border-radius: 50%;
}

.circle2 {
  height: 100px;
  width: 100px;
  background-color: yellow;
  border-radius: 50%;
  border: 2px solid red;
}

.circle3 {
  width: 100px;
  height: 50px;
  /* as the half of the width */
  background-color: gold;
  border-top-left-radius: 110px;
  /* 100px of height + 10px of         border */
  border-top-right-radius: 110px;
  /* 100px of height + 10px of border */
  border: 4px solid gray;
  border-bottom: 0;
}

.img-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title></title>

</head>

<body>

  <section>
    <div class="header_box">
      <div class="box box1" align="center">
        logo
      </div>
      <div class="box box6" align="center">

      </div>
      <div class="box box7" align="center">

      </div>
      <div class="box box2" align="center">
        TEXT 01
      </div>
      <div class="box box3" align="center">
        TEXT 02
      </div>
      <div class="box box4" align="center">
        TEXT 03
      </div>
      <div class="box box5" align="center">
        TEXT 04
      </div>
    </div>
    <div>
      <img src="C:\Users\Dimuth De Zoysa\Pictures\sample3.png" width="100%">
    </div>
    <div class="middle_box">
      <div class="box0 box11">
      </div>
      <div class="box02 box12">
      </div>
      <div class="box0 box13">
      </div>
      <div class="box0 box14">
      </div>
    </div>
    <div class="circle1">
    </div>
    <div class="circle2">
    </div>
    <div class="circle3">
    </div>
    <div>
      <img class="img-circle" src="C:\Users\Dimuth De Zoysa\Downloads\sunsetmypht.jpg">
    </div>
  </section>
</body>

</html>

＆＃13;

Answer 1

您的示例无效，因为您忘记了display指令中的冒号。

你有：

display -webkit-box;

使用：

display: -webkit-box;

话虽如此，请查看flex和flex-direction（我通常使用this article）。

要获取水平行上的圆圈，您需要将它们包装在div中，该display具有与框相同的middle_box规则（例如，通过将div类指定给callbacks: { elementParse: function() { // detects if mobile and if popup is higher than window var div = $(this.contentContainer).height(); var win = $(window).height(); if ( win < 767 ) { if ( div > win ) { $('.mfp-close').addClass('mfp-close-fixed'); $(this.arrowLeft).addClass('mfp-arrow-left-fixed'); $(this.arrowRight).addClass('mfp-arrow-right-fixed'); } else { $('.mfp-close').removeClass('mfp-close-fixed'); $(this.arrowLeft).removeClass('mfp-arrow-left-fixed'); $(this.arrowRight).removeClass('mfp-arrow-right-fixed'); } } } }）。

我想把这些盒子连成一排，但是盒子就像一个列

1 个答案: