1

同じサイズの画像を3枚正しく浮かせるのに苦労しています。中央のフロート画像の左右の余白を自動に設定しましたが、それでも機能しません。私のレイアウトのすべてのパネルは左にフロートされています。これはチュートリアルから修正したもので、互いに突き合わされているので問題なく機能しますが、必要以上のスペースがあるときに画像をフロートしようとすると、希望どおりに表示されません。画像の左と中央および中央と右の間隔。私のコンテンツパネルは幅534ピクセルで、10ピクセルのパディングが554ピクセル、1ピクセルの境界線、5ピクセルの外側の余白を占めています。画像はすべて幅160ピクセルで、FloatLeftクラスに10ピクセルの右マージン、FloatRightクラスに10ピクセルの左マージン、FloatCenterに左右両方の自動マージンを与えました。FloatLeftとFloatRightの両方が、いくつかのページで使用されています。

わかりました、更新-私は今フロートに気づきました：センターは不可能です、DUH !、これが問題です-私はCSSなどにほんの数ヶ月です！

（テーブル以外の）代替手段はありますか？それらをすべて左に揃えて余白を作ることができます：右属性27px（160pxx3画像+27+ 27 = 534px）しかし、これらの画像専用に新しいFloatLeftクラスを作成する必要があります。画像を整列させる最良の方法に関する提案をいただければ幸いです。

ゲイリー。

関連するHTMLとCSS：

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Solar Power Today</title>
<link rel="stylesheet" type="text/css" href="solarpower.css">
</head>
<body>
  <div id="wrapper">
  ...........
  <!-- header panel, then horizontal navigation panel then left panel then ... -->
  ..........
  <div id="content">
  <!-- main content -->
  <h1 id="contentheader">Introduction to Solar Power</h1>
  <p>
  <img class="FloatLeft" src="images/sunonsolarpanelroof160px.jpg" alt="Sun shining
  on roof solar panels" width="160" height="160">
  <img class="FloatCenter" src="images/smallwindturbine160px.jpg" alt="Small wind
  turbine spinning" width="160" height="160">
  <img class="FloatRight" src="images/waveturbine160px.jpg" alt="Wave turbines in
  motion" width="160" height="160">
  </p>


CSS:

* {padding:0; margin:0; border:0;}

.FloatLeft {
  float: left;
  margin: 0 10px 10px 0;
}
.FloatRight {
  float: right;
  margin: 0 0 10px 10px;
}
.FloatCenter {
  float: center;
  margin: 0 auto 10px auto;
}

#content {
  width: 534px;
  min-height: 400px;
  margin: 0px 5px 5px 0px;
  padding: 10px;
  float: left;
  border: 1px solid black;
  display: inline;
}
4

4 に答える 4

0

私は最近、 を使用して、未知の幅にわたる要素の等間隔と任意の数の問題に取り組みましたtext-align: justify;。完全な議論は「text-align: justify;」にあります。インラインブロック要素は適切ですか? 、長所と短所、および代替ソリューションについて十分に議論します。

これは、説明した手法を使用して 3 つの画像を配置する方法を示すフィドルです。すべての主要なブラウザーで動作するはずですが、お気軽にタイヤを蹴って、問題があれば私に連絡してください。

于 2012-09-11T23:01:09.680 に答える
0

クラスで使用float:center;していますが、これは無効です。マージンの長さを置き、変更するための値がありません。.FloatCentercenterfloatfloat:none;

.FloatCenter {
  float: none;
  margin: 0 auto 10px 15px;
}
于 2012-09-11T23:34:26.903 に答える
0

物事をできるだけシンプルに保つようにしています。完全に理解せずにソリューションを使用するよりも、適用しているコードがどのように機能するかを知りたいです。text-align が画像の整列に役立つことを知らなかったので、それをいじってみました。上記の text-align: justify ソリューションを完全に理解するまで、少し迷ってしまいましたが、3 つの画像のそれぞれを新しい div コンテナー クラス .ImageBox に入れました。

.ImageBox {
  width: 178px;
  margin-bottom: 10px;
  float: left;
}

次に、各画像を

要素でインライン スタイルを使用した

画像の位置を揃える要素:

<div class="ImageBox">
<p style="text-align: left"><img src="images/sunonsolarpanelroof160px.jpg" alt="Sun
  shining on roof solar panels" width="160" height="160"></p>
</div>
<div class="ImageBox">
<p style="text-align: center"><img src="images/smallwindturbine160px.jpg" alt="Small
  wind turbine spinning" width="160" height="160"></p>
</div>
<div class="ImageBox">
<p style="text-align: right"><img src="images/waveturbine160px.jpg" alt="Wave turbines
  in motion" width="160" height="160"></p>
</div>

インライン スタイルが嫌われていることは知っていますが、画像ごとに個別の div コンテナーを作成し、各 div コンテナーの text-align プロパティをスタイルシートの左、中央、または右に設定するよりも少ないコードを使用します。また、幅や高さのプロパティを指定したり、(テスト目的で) 境界線を指定したりするだけでは、ブラウザーに div コンテナーが表示されないことにも気付きました。ボックスを有効にするには、div コンテナ クラスに float または clear プロパティが必要なようです。cssもっと勉強しないと。

于 2012-09-13T15:09:38.210 に答える
0

探しているものを達成する方法の 1 つを次に示します。

http://jsfiddle.net/CsjYN/1/

HTML:

<div id="content">

  <h1 id="contentheader">Introduction to Solar Power</h1>

  <div class="images">
   <img class="img-left" src="images/sunonsolarpanelroof160px.jpg" alt="Sun shining on roof solar panels" />

   <img class="img-center" src="images/smallwindturbine160px.jpg" alt="Small wind turbine spinning" />

   <img class="img-right" src="images/waveturbine160px.jpg" alt="Wave turbines in motion" />
  </div>

</div>

CSS:

#content {
 width: 534px; /* full width 556px */
 padding: 10px;
 border: 1px solid #000;
}

#content h1 {
 margin-bottom:20px;
}
#content .images {
 overflow:auto;
}
#content .images img {
 width:160px;
 height:60px;
 float:left;
}
#content .images img.img-left,
#content .images img.img-center {
 margin-right:27px;
}
于 2012-09-11T22:52:30.863 に答える