Question

我试图从左到右添加三张图片。由于某些原因，我无法弄清楚他们不会排队。我绝不是专业人士。我知道这很危险，因为我确信你能够看到。

＆＃13;

  SELECT a.SUPPLIER_ID, a.PARENT_SUPPLIER_ID,
  FROM SUPPLIER a
  LEFT JOIN
  (SELECT DISTINCT PARENT_SUPPLIER_ID
  FROM SUPPLIER
  WHERE SUPPLIER_ID != PARENT_SUPPLIER_ID
  ) b
  ON a. SUPPLIER_ID     = b.PARENT_SUPPLIER_ID
  WHERE a. SUPPLIER_ID != a.PARENT_SUPPLIER_ID
     OR a. SUPPLIER_ID     = b.PARENT_SUPPLIER_ID;

＆＃13;

Add here is the CSS for above. 
.header-ad {
    float: left;
    width: 100%;
    text-align: center;
    margin-top: -105px;
    margin-bottom: -20px;
}

.head-left {
	display: -webkit-inline-box;
    float: left;
    width: 150px;
    text-align: left;
    margin-top: 15px;
    margin-bottom: -20px;
}

.head-right {
	display: -webkit-inline-box;
	float: right;
    width: 150px;
    text-align: right;
    margin-top: -115px;
    margin-bottom: -20px; 
}

＆＃13;

对此的任何帮助都会很棒。谢谢。

Answer 1

在

.header-ad {
    float: left;
    width: 100%;
    text-align: center;
    margin-top: -105px;
    margin-bottom: -20px;
}

宽度不应该是100％（以像素为单位），因为它需要整个宽度并将其他图像移动到下一行。

如果你使用浮动，你也不需要display: -webkit-inline-box;属性。

Answer 2

你在浮动物品的基本理念上做错了。

你应该想到“我有一个盒子，想要将三个项目连成一个盒子”。

在所有项目上使用float：left（并排排列）。

.head {
  width: 100%
  height: 236px;
}
.head div {
  float: left;
  height: 100%;
  min-height: 100%;
}
.head div:last-child {
  float: right;
}
.col25 {
  width: 25%;
}
.col50 {
  width: 48%;
  padding: 0 1%;
}

<div class="head">
  <div class="head-left col25">
    <a href="http://google.com" target="_blank"><img src="http://amorosso.staging.wpengine.com/wp-content/uploads/L14-30.png"></a>
  </div>
  <?php if(!empty($mts_options['mts_header_adcode'])) { ?>
  <div class="header-ad col50">
    <?php echo do_shortcode($mts_options['mts_header_adcode']); ?>
  </div>
  <?php } ?>
  <div class="head-right col25">
    <a href="http://google.com" target="_blank"><img src="http://amorosso.staging.wpengine.com/wp-content/uploads/L14-30.png"></a>
  </div>
</div>

编辑：在这种情况下，您可以为元素添加特定宽度。将class col25添加到左侧和右侧标题，将col50添加到header-ad。将这些类添加到您的css（更新的代码）。我还为盒子添加了最小高度/高度。

CSS尝试排队三个iamges

2 个答案: