1
4

1 に答える 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 に答える