Question

我正在尝试仅调整社交媒体（instagram / facebook），以便它们全部停留在同一行，同时保持未知高度的色块（因为这些都是响应式徽标），因为它们是（垂直集中到彼此）。

有关如何操作的任何评论？我也在使用twitter bootstrap。

提前感谢您提供的任何帮助。

HTML

<div class="row logoLocation vertical-align">
        <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 kite vcenter">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 kiteSocialMedia">
              Facebook/Instagram
            </div>    
        </div>

         <div class="col-lg-5 col-md-5 col-sm-12 col-xs-12 supermarket vcenter">                  
              <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 supermarketSocialMedia">
                Facebook/Instagram
              </div>
          </div>

          <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 koskos vcenter">
              <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 koskosSocialMedia">
            Facebook/Instagram
              </div>
          </div>
 </div> <!--row -->

CSS

.vertical-align{
  display:flex;
  align-items:center;
}

.kite{
  width:200px;
  height:200px;
  background-color:red;
  float:left;
}

.supermarket{
   width:150px;
  height:150px;
  background-color:blue;
  float:left;
}

.koskos{
  width:175px;
  height:400px;
  background-color:green;
  float:left;
}

Answer 1

如果要将某些元素保留在同一行中，则必须将该行分开。

$rezultat = $polaczenie->query(sprintf("SELECT terminstart FROM uzytkownicy WHERE id=%d", $_SESSION['id']));
$wiersz = $rezultat->fetch_assoc();

$start = DateTime::createFromFormat('Y-m-d H:i:s', $wiersz['terminstart'])->format('Y-m-d H:i:s');
echo'<script>alert("'.$start.'");</script>';

$teraz = (new \DateTime())->format('Y-m-d H:i:s');
echo'<script>alert("'.$teraz.'");</script>';

$interval = $start->diff($teraz);
echo'<script>alert("'.$interval.'");</script>';

您可以任意组合划分。喜欢：<div class="row"> <div class="col-md-6"> // Elements </div> <div class="col-md-6"> // Elements </div> </div>

Answer 2

您可以尝试position:absolute;。调整响应式屏幕的top值。

.kiteSocialMedia, .supermarketSocialMedia, .koskosSocialMedia {
 font-size: 15px;
 margin-top: 20px;
  position: absolute;
  top: 100px;
}

Answer 3

首先，你必须让你所有的div都相同。

您可以使用flexbox。

如果图像在div中垂直居中，则再次使用flexbox或绝对定位将“SocialMedia”div推到底部。

.logoLocation {
  display: flex;
}
.logoLocation > div {
  padding-top: 1em;
  display: flex;
  flex-direction: column;
  align-items: center;
}
[class$="SocialMedia"] {
  margin-top: auto;
  text-align: center;
  padding: 1em;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="row logoLocation vertical-align">
  <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 kite vcenter">
    <a href="http://www.eat-at-kite.sg" target="_blank">
      <img class="img-responsive" src="http://thesupermarketco.sg/test/images/kite_logo.png" alt="Kite Logo" />
    </a>

    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 kiteSocialMedia">
      <a class="fb" href="http://www.facebook.com/kiteoncraig" target="_blank">FACEBOOK</a>/
      <a class="insta" href="http://www.instagram.com/eatatkite" target="_blank">INSTAGRAM</a>
    </div>

  </div>

  <div class="col-lg-5 col-md-5 col-sm-12 col-xs-12 supermarket vcenter">
    <a href="http://www.sprmrkt.com.sg" target="_blank">
      <img class="img-responsive" src="http://thesupermarketco.sg/test/images/sprmrkt_logo.png" alt="SPRMKRT Logo">
    </a>

    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 supermarketSocialMedia">
      <a class="fb" href="http://www.facebook.com/sprmrktsg" target="_blank">FACEBOOK</a>/
      <a class="insta" href="http://instagram.com/sprmrkt" target="_blank">INSTAGRAM</a>
    </div>

  </div>

  <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 koskos vcenter">
    <img class="img-responsive" src="http://thesupermarketco.sg/test/images/koskos_logo.png" alt="Koskos Logo">

    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 koskosSocialMedia">
      <a class="fb" href="http://www.facebook.com/koskos.sg" target="_blank">FACEBOOK</a>/
      <a class="insta" href="http://instagram.com/koskos_sg" target="_blank">INSTAGRAM</a>
    </div>

  </div>
</div>

Codepen Demo（使用flexbox）。

将div与另一个div的底部对齐

3 个答案: