0

私はこれに何時間も取り組んできました:「タグ」divを、それが含まれているdivの下部に垂直に揃えることができないようです。それが含まれているdivは、それが含まれているdivを埋めるために水平方向に拡張され、変更されます画像のあるdivの隣にあるため、水平方向のサイズです。この「タグ」divをコンテナの一番下に貼り付けたいのですが、わかりません。必要に応じて、div を再編成することにもオープンです。

設定bottom: 0; overflow: hidden; してみました 設定してみました それは containerdiv position: relative;で、その 'position: absolute;

jsfiddle へのリンクは次のとおりです: http://jsfiddle.net/29WKX/8/

これが私が今いるところです：

CSS:

body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
  padding-top: 100px;
  background-color: deepskyblue;
}

    .content{
      background: #fff;
      margin: 0 auto;
      width:720px;
      text-align: center;
      padding: 1px;
      /* border-radius */
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;
      /* box-shadow */
      -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
      -moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
      box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
    }
    .right-pic {
        float: right;
        width: auto;
    }
    .left-pic{
      float: left;
      width: auto;
    }
    .text {
      background-color: lightgray;
      overflow: hidden;
            position: relative;
    }
    .tag{
      background-color: red;
      position: relative;
      bottom: 0;
    }

そして、ここに私のHTMLがあります:

<div class="content">
  <div class="right-pic">
    <img src="" width="300px" height="220px" alt="image">
  </div>
  <div class="text">
    <h2>Title</h2>
    <p>this takes up remaining space to the left</p>
  </div>
  <div class="tag">tag</div>
  <div style="clear: both"></div>
</div>
<br />
<div class="content">
  <div class="left-pic">
    <img src="" width="320px" height="200px" alt="image">
  </div>
  <div class="text">
  <h2>Title</h2>
    <p>this takes up remaining space to the left</p>
  </div>
  <div style="clear: both"></div>
</div>
4

1 に答える 1

1

私があなたの質問を正しく理解していれば、あなたがする必要があるのは、次を追加することだけです:

position: relative;

あなたのコンテンツ要素で。そして：

position: absolute;

yout タグ要素で。

この JSFiddle を確認してください。

于 2013-11-15T00:01:39.303 に答える