質問する
2584 次
1 に答える
3
ポイント: float 要素は、コンテナ内のすべての要素の前に配置する必要があります。
段落を最初に配置すると、その親のすべての幅が使用されます。また、浮動要素は段落の後にレンダリングされます。
HTML:
<div class="container">
<a href="#" class="button">My Button</a>
<p class="c2a-content">This is just a test. Hopefully it will line up properly!</p>
</div>
CSS:
.container {
overflow: hidden; /* clear fix hack */
}
.c2a-content {
text-align:left;
background-color: gold; /* Just for demo */
margin: 0; /* Override user agent stylesheet to align vertically */
}
.button {
/* Other CSS declarations */
float: right; /* float the button to the right */
margin-left: 10px; /* make a space between button and the paragraph */
}
これがJSBin Demoです。
注:フローティングボタンの後ろから段落を引き出す必要がある場合は、段落に設定するか、単にプロパティを設定することができます。overflow-x: hidden;
margin-left
JSBin デモ #2を次に示します。
于 2013-08-29T21:22:30.963 に答える