css 横並び 2つのDIVを並べて、その下部に垂直に位置合わせ




横並び (5)

私にとっては、両方の部門にこのスタイルを適用していました:

.bottom-align {vertical-align:bottom; 表示:インラインブロック; 浮動小数点:なし; }

両方のdivの間で、空白のコメントを追加して擬似スペースを削除する必要がありました。

</div><!-- ---><div>

私は2つのDIVが並んで配置され、底部に垂直に整列する必要があります。

  • オレンジ色のdivには幅や高さがありません 。 彼の内容に応じて成長することができます
  • 私はパディングと緑のdivの余白を使用することができる必要があります
  • 私はjavascriptを使用しないソリューションを持っていたいと思います


これはいくつかの楽しい練習でした:)おそらく最高の答えはありませんが、それは仕事を完了する必要があります。

html:

<table>
  <tr>
    <td>
        <div id="div3">testing a whole<br/> bunch <Br/>of text and content t<br/>hat this co<br/>uld co<br/>ntain<br/> hadahdee<br/> wha da da deet</div>
    </td>
    <td>
      <div id="div4">nick</div>
    </td>
  </tr>
</table>

CSS:

td
{
    vertical-align:bottom;
}

#div3
{
    border:solid 5px blue;
    float:left;
}
#div4
{
    width:50px;
    height:20px;
    border:solid 5px red;
    float:right;
}

jsfiddleコードを参照してください。 必要に応じてdivに余白を追加する


https://jsfiddle.net/panosang/96bnt3xa/

数時間の作業と恐ろしい頭痛の後、完璧な解決策は、 margin-top margin-bottonmargin-top要素を追加することだと思います。

特定のピクセルを追加したり、毎回CSSファイルにパーセンテージを変更したりするのは本当に嫌ですが、私の問題では完璧な解決策であることがわかりました。

私は<div> <table>代わりに<table>を使用しましたが、 <div>も使用できます。


参照: http://jsfiddle.net/thirtydot/J9eds/ : http://jsfiddle.net/thirtydot/J9eds/

私はdisplay: inline-blockvertical-align: bottom組み合わせて使用​​しました。

HTML:

<div id="container">
    <div id="left">
        left<br />left<br />left<br />left<br />left<br />left<br />
        leftleftleftleftleftleft
    </div>
    <div id="right"></div>
</div>

CSS:

#container {
    border: 1px solid red;
    float: left;
}
#left, #right {
    border: 2px solid red;
    background: #ccc;

    vertical-align: bottom;
    display: inline-block;
    /* ie6/7 */
    *display: inline;
    zoom: 1;
}
#right {
    margin: 20px 20px 0 20px;
    padding: 20px;
    width: 100px;
}

100%ではありませんが、このようなものはうまくいくはずです:

<div class="wrapper">
    <div class="orange"></div>
    <div class="green"></div>
</div>

div.wrapper div {
    position: relative;
    float: left;
    bottom: 0px;
}

フロートは必要ないかもしれません。





html