0

3 列の流動的な行 (Bootstrap) の左側に雲の小さな画像を浮かせようとしています。これが私のコードです：

      <img src="img/cloud1.png" style="width:100px;float:left;">
      <div class="row-fluid" style="margin-top:50px;">
  <div class="span4 hero-unit" style="min-height:400px;background-color:#FFCFD9;">
    <h3>Quick Links</h3>
    <p><a href="mailto:info@albancloud.com" style="text-decoration:underline;">Our Email : info@albancloud.com</a>
    </p>
    <p><a href="pricing.php" style="text-decoration:underline;">Pricing options</a>
    </p>
  </div>
  <div class="span4 hero-unit" style="min-height:400px;background-color:#CAF9FC;">
    <h3>What We Do</h3>
    <p>albanCloud provides security and flexability to your Business’s IT. We provide our clients with a fully managed service for their cloud backups and virtual servers.
    </p>
  </div>
  <div class="span4 hero-unit" style="min-height:400px;background-color:#FCF6A2;">
    <h3>Where We Operate</h3>
    <p>
      Hertfordshire area, St Albans, Luton, Harpenden, Hatfield, Hemel, Welyn, Watford, Harrow, Barnet.
    </p>
  </div>
</div>

スパン クラス数の合計が 12 になることは確認しましたが、足場システム内のフローティング イメージを考慮する方法がわかりません。

理想的には、一番左のヒーロー ユニット (「クイック リンク」) の右上隅にクラウドを配置したいと思います。

これは現在の結果です:

現在の状況

3 番目のヒーロー ユニットが同じ行に収まるようにする必要がありますrow-fluid。img を divの外に配置し、 inline-blockand ブロックと負のマージンを使用してみました

PS私はこれをレスポンシブにしたいので、フロートの代替手段を受け入れます

注: 上記の例で示したインライン CSS 以外のスタイルは指定していません。残りはデフォルトの Bootstrap です。

4

1 に答える 1

1

最初のボックス内に画像を移動してから、配置できます。

<div class="row-fluid quick-links" style="margin-top:50px;">
  <div class="span4 hero-unit" style="padding:20px;min-height:400px;background-color:#FFCFD9;">
  <img src="img/cloud1.png" class="cloud" >
  <h3>Quick Links</h3>
  <p><a href="mailto:info@albancloud.com" style="text-decoration:underline;">Our Email : info@albancloud.com</a></p>
  <p><a href="pricing.php" style="text-decoration:underline;">Pricing options</a></p>
  </div>
...
</div>

.quick-links {
  position: relative;
end

.cloud {
  position: absolute;
  top: 0px; # Maybe you should update this value.
  left: 0px; # Maybe you should update this value.
end

お役に立てれば！

于 2013-05-23T00:13:25.423 に答える