親の一番下で浮動兄弟の横の位置div

Question

次のマークアップがあると、画像の右側とテキストの下にボタンが表示されますが、が親の末尾に貼り付けられました。通常、これはthis answerごとに実行されますが、この場合フロートが存在するため、コンテンツは画像の上に表示されます。また、絶対的な位置づけは、最終的にはテキストコンテンツも重複する可能性があるので、問題になるようです。この質問の目的のために、画像の幅がであると仮定すると、が残っていると仮定してください。

私はおそらく、これを再構成したり、画像を浮かべて移動したりしなければならないと思っていますが、むしろそうではありません。レイアウトを大幅に変更することなく、この作業を行うことができる、私が見落とした単純な解決策はありますか？

.wrapper { 
 
    position: relative; 
 
    overflow: auto; 
 
} 
 

 
.image { 
 
    float: left; 
 
    width: 30%; 
 
} 
 

 
.image img { 
 
    max-width: 100%; 
 
} 
 

 
.stick-to-bottom { 
 
    position: absolute; 
 
    bottom: 0; 
 
} 
 

 
button { 
 
    padding: 10px 25px; 
 
    font-size: 16px; 
 
}

<div class="wrapper"> 
 
    <div class="image"> 
 
    <img src="http://www.calgaryherald.com/cms/binary/10035261.jpg" /> 
 
    </div> 
 
    <div class="stick-to-top"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    </div> 
 
    <div class="stick-to-bottom"> 
 
    <div>Click buttons below, but only if you are cool.</div> 
 
    <button>Button 1</button> 
 
    <button>Button 2</button> 
 
    </div> 
 
</div>

Answer 1

.stick-to-bottomクラスdisplay: inline;を追加します。

display CSSプロパティは 要素に使用レンダリング・ボックスのタイプを指定します。 HTMLでは、デフォルトの表示プロパティ値は、HTML仕様に記述されている ビヘイビアまたはブラウザ/ユーザデフォルトスタイルシート から取得されます。 XMLのデフォルト値はインラインで、 にはSVG要素が含まれています。

.wrapper { 
 
    border: solid 1px #f00; 
 
    position: relative; 
 
    overflow: auto; 
 
} 
 

 
.image { 
 
    border: solid 1px #f00; 
 
    float: left; 
 
    width: 30%; 
 
} 
 

 
.image img { 
 
    max-width: 100%; 
 
} 
 

 
.stick-to-bottom { 
 
    border: solid 1px #f00; 
 
    display: inline; 
 
    position: absolute; 
 
    bottom: 0; 
 
} 
 

 
button { 
 
    padding: 10px 25px; 
 
    font-size: 16px; 
 
}

<div class="wrapper"> 
 
    <div class="image"> 
 
    <img src="http://www.calgaryherald.com/cms/binary/10035261.jpg" /> 
 
    </div> 
 
    <div class="stick-to-top"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    </div> 
 
    <div class="stick-to-bottom"> 
 
    <div>Click buttons below, but only if you are cool.</div> 
 
    <button>Button 1</button> 
 
    <button>Button 2</button> 
 
    </div> 
 
</div>

より良いオプションを使用することができ

： display: inline-block;と margin: 20px 0 0 0;。

.stick-to-bottom { 
    border: solid 1px #f00; 
    display: inline-block; 
    margin: 20px 0 0 0; 
} 

このような何か：

.wrapper { 
 
    border: solid 1px #f00; 
 
    position: relative; 
 
    overflow: auto; 
 
} 
 

 
.image { 
 
    border: solid 1px #f00; 
 
    float: left; 
 
    width: 30%; 
 
} 
 

 
.image img { 
 
    max-width: 100%; 
 
} 
 

 
.stick-to-bottom { 
 
    border: solid 1px #f00; 
 
    display: inline-block; 
 
    margin: 20px 0 0 0; 
 
} 
 

 
button { 
 
    padding: 10px 25px; 
 
    font-size: 16px; 
 
}

<div class="wrapper"> 
 
    <div class="image"> 
 
    <img src="http://www.calgaryherald.com/cms/binary/10035261.jpg" /> 
 
    </div> 
 
    <div class="stick-to-top"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    </div> 
 
    <div class="stick-to-bottom"> 
 
    <div>Click buttons below, but only if you are cool.</div> 
 
    <button>Button 1</button> 
 
    <button>Button 2</button> 
 
    <br /> Some text...<br /> Some text...<br /> Some text...<br /> Some text...<br /> Some text... 
 
    </div> 
 
</div>

Answer 2

以下のコードは、あなたが望むものにするのに役立ちますが、私はその構造をお勧めしません。

<style> 
.wrapper { 
    position: relative; 
    overflow: auto; 
} 

.image { 
    float: left; 
    width: 30%; 
} 

.image img { 
    max-width: 100%; 
} 

.stick-to-bottom { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    right:0; 
    text-align: right; 
} 

button { 
    padding: 10px 25px; 
    font-size: 16px; 
    float: right; 
} 

</style> 

<div class="wrapper"> 
    <div class="image"> 
    <img src="http://www.calgaryherald.com/cms/binary/10035261.jpg" /> 
    </div> 
    <div class="stick-to-top"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
    </div> 
    <div class="stick-to-bottom"> 
    <div>Click buttons below, but only if you are cool.</div> 
    <button>Button 1</button> 
    <button>Button 2</button> 
    </div> 
</div> 

代わりに、私は右に浮動コンテンツの残りの部分を保持して左に浮いた画像を保持し、別の2つのdiv 1つを有するお勧めします。残りのスタイルが適用されるので、ボタンを画像の上に置くことについて心配する必要はありません。