詳しく書きますと、前回した質問、
http://oshiete.goo.ne.jp/qa/7786505.html
の続きになります。
ちなみにこれは、今の所、解決した次第です。
しかし、新たな場面に直面している最中であります。
http://sky.geocities.jp/thanksv0358/index.html#
質問は、上記で作成しているページについてです。
その内容ですが、ページ中程にある「 今月のおすすめ 」とある、すぐ下の「 見出し3 」という2つの項目を先頭行にして、横一列にそろえて表示したいと思いました。
そのため、項目内容をHTMLで、
<div class="left">
~
</div>
と、
<div class="right">
~
</div>
で囲い、その後、それぞれをCSSで、
.left{
float:left;
}
.right{
float:right;
}
としたにもかかわらず、何故か中途半端な形で、ずれている状態が確認できます。
これが現在、意味不明な箇所になっています。
ここで質問ですが、この場合、どうすれば「 見出し3 」の文字2つを並列に表示できますでしょうか?
詳しい方がいましたら、よろしくお願いします。
No.2ベストアンサー
- 回答日時:
幅を設定しましょう。
今現在の状況は、小さな箱にそれよりも大きな物を入れようとしています。
そうすると、箱に入らないか、箱は壊れますよね・・・
問題点:
1、トップ画像よりも大きな枠にする。または、画像を小さくする。
2、メイン=レフト+ライトの幅に収まるようにする。
1、
画像が、787pxなのだから、mainの枠は600pxでは無理があります。
なので、
width: 600px; ではなく、 width: 800px; 程度にしましょう。
2、
枠幅が狭いからライトが入れない・・・
なので、
.left {
float: left;
width: 400px;
}
.right{
float:right;
width: 400px;
}
左width: 400px;+右width: 400px;=合計800px ←この値より小さくする事。
No.3
- 回答日時:
他の方への回答と混同していました。
先に示した回答のように
<div class="section">
<div class="section">
<h3>見だし</h3>
・・・・・
</div>
<div class="section">
<h3>見だし</h3>
・・・・・
</div>
</div>
として、
div.section{position:relative;}
div.section div.section{
width:50%/* 49%くらいのほうが良い */
float:left;
}
33%以下にすると、三つ並びますし、最小幅を決めておくとウィンドウ幅によって横に並んだり縦に並びます。
float:leftに続いてfloat:right;は、とってもまずいです。
説明済みです。
.left と言う書き方はCSS1の時代の名残です。CSS2以降は、基点となるセレクタにつなげるセレクタを書くことになっています。
div.section ----- これは、要素セレクタdiv[class~=section"]と同じ意味
と書くのがルールです。
.sectionは、*.sectionを省略したものとみなされるだけです。もし書くなら
*.sectionとかく癖をつけましょう。
断然その方がわかりやすいはずです。
No.1
- 回答日時:
先に回答しました。
CSSのセンタリングが、「div」で何故か出来ない - ホームページ作成ソフト - 教えて!goo ( http://oshiete.goo.ne.jp/qa/7786505.html#a2 )
のサンプルHTMLを試してください。
float:leftをいずれにも指定するほうが良いです。
これでうまく表示されるなら、他のところに原因があります。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP アップロード画像数でCSSを分けることに成功したのですが、画像の横に文字を並べることが出来ません。 3 2023/07/28 17:16
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- HTML・CSS HTML、cssのatomつぅーやつで 課題Ex1ってやつを表示させたいのですが、 私は課題Ex1が 2 2022/12/15 16:56
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ASP.NETでプレーンなページに文...
-
Excel VBAでのIE操作でクリック...
-
VBAでの素数の求め方
-
行頭から全角で3文字位さげた...
-
htmlの文字が縦書きになる
-
HTML属性での「""」 「''」違い
-
【ヒトの神秘】美男美女から何...
-
リストマーカーをボックス内に...
-
ボタンをセル内一杯に表示させ...
-
<div id="container">の使いか...
-
<table>の高さ固定。情報増加時...
-
質問1.
-
htmlのolやulなどlistにtitleや...
-
idの中のid指定
-
サイトにjQueryが使用されてい...
-
html/cssの、navを2段にする...
-
リンクをつけた画像をクリック...
-
個別にリンクの色を変える方法
-
border-style:solidで文字がずれる
-
<h1>、<h2>と<p><div>の行間を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ASP.NETでプレーンなページに文...
-
pythonでのカーソル移動がずれる
-
cnt <= (others => '0'); の意...
-
Excel VBAでのIE操作でクリック...
-
検索結果がツリー状に表示され...
-
VBAでの素数の求め方
-
秀丸で複数行コメントアウトを...
-
質問です。 新規登録ボタンが全...
-
chromedriverのver-upで動作不...
-
safariで見るとページ上部に余...
-
Firefoxで別ページのアンカーリ...
-
行頭から全角で3文字位さげた...
-
プログラマーの方に質問です。 ...
-
背景が動くWEBページの作り方に...
-
css リンクの色が全部変わって...
-
Ajaxで文字列を表示したいです。
-
同じIE8なのに機種によってmarg...
-
携帯サイトの背景色
-
VBA : QueryTableでのスクレイ...
-
htmlの文字が縦書きになる
おすすめ情報