CSSでdivの内容を上に揃える方法
- CSSでdiv要素内のコンテンツを上に揃える方法を知りたいです。
- 具体的には、<main>要素と<side2>要素の内容を上揃えにしたいです。
- また、ブラウザの大きさを変えても中央を基準にコンテンツが動くようにしたいです。
- ベストアンサー
css 各divの内容を上に揃えたいです。
こんにちは、初心者です。宜しくお願いします。 <main>の右は<side2>ですが、mainの画像BBBの真横に、side2の内容が表示されず、真横ではなくて、BBBのやや斜め右下に表示されるんです。 全体を中央揃えにしてから、このような問題にぶつかりました。 mainとside2の内容を上先頭で揃え、ブラウザの大きさを変えても中央を基準に内容も動くようにしたいです。 ご教授のほど、よろしくお願い致します。 ---------------------------------------------- <html> <head> <title>○○</title> <link href="design/shop_index02.css" rel="stylesheet" type="text/css"> </head> <body> <div class="contents"> <div class="top"> <h1>○○</h1> <h2> ○○</h2> </div> <div class="middle"> <a href="○○"> <img src="../img/logo.gif"></a> </div> <div class="main"> <a href="●●"> <img src="BBB"></a> </div> <div class="side2"> <a href="●●"> <img src="●●.gif"></a> <h3>●●</h3> <p>●●</p> </div> </div> </body> </html> ---------------------------------------------- /*ページのレイアウト用css*/ body{ margin:0px; padding:0px; background-color:#BDB76B; text-align:center; } body a img{ border: none; } .contents{ width:900px; height : 2700px; background-image:url(○○); margin:auto; text-align:left; clear:both; } h1{ color:#c0c0c0; font-size:12px; text-align:center; font-family:"ＭＳ 明朝"; } h2{ font-size:10px; font-family:"MS P明朝","細明朝",serif; color:#c0c0c0; margin-left:8px; } h2 a{ font-family:"MS ゴシック","osaka,sans-serif"; font-size:10px; color:#CC6600; } h3{ font-size:13px; font-family:"MS P明朝","細明朝",serif; color:#669900; } h3 img{ margin-left:720px; } .top{ width:900px; height:170px; margin-left:80px; } .middle{ width:900px; height:170px; margin-left:100px; color:#999999; margin-top:40px; } .main { width:700px; margin-top:60px; margin-left:80px; float:left; } .side2{ width:200px; margin-top:60px; margin-left:700px; } .side2 p{ color: #999999; font-family:"MS P明朝","細明朝",serif; font-size:10px; width:160px; text-align:left; } .side2 a{ color:#CC6600; text-decoration:none; }
- saladadada
- お礼率38% (5/13)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは 【IE】 .middleの部分で .middle width:900px; margin-left:100px;でcontents幅は1000pxとなっていますが .main width:700px; margin-left:70px;と .side2 width:200px; margin-left:700px;で 合計1670pxとなっていますので.mainでfloat:left;してもcontents幅より大きいので下に追いやられてしまっているわけです #1様の言うようにmargin-leftを消すかその分だけdivの幅を減らすかしてください これで900pxとなりますが実際に横に並べる為にはcontentsの幅は903px必要になります これは<div>と<div>の間に見えない(消せない?)隙間があるためです 【Firefox,Opera】 IEでは.mainだけにfloat:left;すれば回りこみますがこちらは回り込まないので.side2にもfloat:left;を入れる必要があります（IEでも入れると900pxで並べられます） IEではmargin-leftした分だけcontents幅が増えますがこちらは増えませんのでmargin-left分だけcontentsより表示がはみ出ることになります paddingでした場合も同様 このはみ出しを表示させないようにするにはcontentsにoverflow:hidden;をいれます
その他の回答 (1)
divに付いているmargin-leftは全部取ってしまう。 side2にfloat-leftを追加。 これで上手くいくと思います。 下のサイトに色々と解説があるので目を通しておいて下さい。
関連するQ&A
- HTML&CSS DIVをぴったりと縦に並べたい
HTML&CSS初心者です。 下記のソース様に、DIVで一つにまとめたBOXを縦に並べたいのですが、 「見出し002」の上のマージンがうまく取れずに困っています。 .box内のphoto00.jpgをフロートにしている為、フロートが悪さをしている事を考え、 「見出し002」の上のDIV内に<br style="clear: both;" />を入れると、余白が生まれるのですが、 MacのSafariとFirefoxでは、余白の差が出てしまいます。（Safariの方が余白が大きい） <br style="clear: both;" />を入れないと、上のマージンはほぼ消えてしまい、わずかにFirefoxの方では余白が生まれます。 ちなみにこの現象は「ここにテキストが入ります。」の行数を減らすと解決するのですが、 下記のソースでも、photo00.jpgの高さをはみ出す行数ではない為、この<div class="box">に 変な膨らみを持たせたくありません。 どなたか解決法を教えて下さい。よろしくお願い致します。 【HTML】 <div id="main"> <div class="mds01"><h3><em>見出し001</em></h3></div> <div class="box"> <img src="img/photo00.jpg" width="155" height="108"> <h5>小見出し</h5> <p class="txt">ここにテキストが入ります。<br><br> ここにテキストが入ります。<br> ここにテキストが入ります。</p> </div> <div class="box"> <img src="img/photo00.jpg" width="155" height="108"> <h5>小見出し</h5> <p class="txt">ここにテキストが入ります。<br><br> ここにテキストが入ります。<br> ここにテキストが入ります。</p><br style="clear: both;" /> </div> <div class="mds02"><h3><em>見出し002</em></h3></div> <div class="box"> <img src="img/photo00.jpg" width="155" height="108"> <h5>小見出し</h5> <p class="txt">ここにテキストが入ります。<br><br> ここにテキストが入ります。<br> ここにテキストが入ります。</p> </div> </div> 【CSS】 /*メイン大枠部分*/ #main { margin: 0px; padding: 0px; width: 627px; float: right; background: #FFFFFF; height: auto; } /*各見出し*/ .mds01 h3 { background: url(img/mmds01.gif) no-repeat; margin: 25px 0px 15px; padding: 0px; height: 20px; width: 587px; font-size: 9px; color: #FFFFFF; clear: left; float: none; } .mds02 h3 { background: url(img/mmds02.gif) no-repeat; margin: 25px 0px 15px; padding: 0px; height: 20px; width: 587px; font-size: 9px; color: #FFFFFF; clear: left; float: none; } /*ボックス*/ .box { margin: 0px; padding: 0px; height: auto; width: 587px; clear: left; } /*ボックス内・画像とテキスト*/ #main .box img { float: left; padding-right: 10px; } #main .box h5 { font: bold 14px "ＭＳ Ｐゴシック", Osaka; color: #022962; margin: 0px 0px 10px; padding: 0px; } .txt { font: normal 13px/16px "ＭＳ Ｐゴシック", Osaka; color: #333333; margin: 0px; padding: 0px; } em { visibility: hidden; }
- ベストアンサー
- HTML
- CSS、ヘッダーの上にあいだが開く
初めてWEBページを作ろうとしているものなのですが、 なぜかヘッダーの上にあいだが開いてしまいます。（送付の図のように） このあいだを無くして濃いオレンジからピッタリ、ヘッダーから始めたいんですけれども、どうしたらいいのでしょうか？ 「HTML」 <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css" type="text/css"> <title>公式サイト</title> </head> <body id="body"> <div id="header"> <h1 class="title">title</h1> </div> <div id="page"> <div id="main"> <div class="center"> <img src="top-picture2.jpg" width="675" height="420"> </div> <h4>グループについて・・・</h4> <p>testtesttesttesttesttesttesttesttesttest</p> <div class="history"> <h4>更新履歴</h4> </div> <div class="youtube"> <h4>ユーチューブ</h4> </div> </div> <div id="sidebar"> <img src="top.jpg"> <img src="top2.jpg"> </div> </div> <div id="footer"> <h2>フッター</h2> <p class="center">©2014 dutchiris.lolipop.jp All rights reserved.</p> </div> </body> </html> 「CSS」 @charset "UTF-8"; /* 背景色用 */ #body{ background-color: #FFD5AA; } #header{ height: 75px; background-color: orange; clear: both; /*background: url(path_back1.gif) repeat-x bottom; */ } .title{ color: #FFFFFF; padding-top: 30px; font-size:45px; font-family:"ＭＳ Ｐゴシック","ＭＳ Ｐゴシック",sans-serif; width: 1000px; margin: 0 auto; } #main{ float: left; background-color: #ffffff; width: 750px } #sidebar{ float: right; background-color: #ffffff; width: 250px; } #page{ margin-top:75px ; width: 1000px; margin: 0 auto; } .history{ float: left; width: 375px; } .youtube{ float: right; width: 375px; } #footer{ width: 1000px; clear:both; width:100%; } /* 中央寄せ */ .center{ text-align: center; }
- 締切済み
- CSS
- <div>この余白は・・・
<div>で作ったボックスの中に、さらに<div>のボックスを二つ（box、box2）並べたいのですが、float:leftでboxを左に寄せると、次に回り込んで表示されるbox2との間にかなりの余白があります。 CSSでbox、box2にmarginは指定していないのですが、この余白は何なんでしょうか？ また、このbox、box2をある程度間に余白を持たせた上でセンタリングしたいのですが、これもなぜかうまくいきません・・・。 ▼HTML <div class="out"> <div class="title"> <img src="img/title.jpg" width="700" height="75" border="0"> </div> <div class="main"> <img src="img/main.jpg" width="700" height="375" border="0"> </div> <div class="menu"> <img src="img/home_a.jpg" width="100" height="35" border="0"> <img src="img/first.jpg" width="100" height="35" border="0"> <img src="img/info.jpg" width="100" height="35" border="0"> <img src="img/order.jpg" width="100" height="35" border="0"> <img src="img/support.jpg" width="100" height="35" border="0"> <img src="img/link.jpg" width="100" height="35" border="0"> <img src="img/question.jpg" width="100" height="35" border="0"> </div> <div class="area"> <div class="box"> <h5>AAAAAAAAA</h5> <img src="img/kari.gif" width="250" height="100" border="0"> </div> <div class="box2"> <h5>BBBBBBBBB</h5> <img src="img/kari2.gif" width="250" height="100" border="0"> </div> </div> </div> ▼CSS div.out{ width:700px; background-color:#ffffff; } div.main{ border-style:solid none solid none; border-width:10px; border-color:#666666; } div.menu{ margin-bottom:50px; } div.area{ text-align:center; padding:0.7em; border:solid; border-color:red; } div.box{ float:left; width:250px; border-style:none solid solid solid; border-width:1px; border-color:#99ccff; background-color:#99ccff; } div.box2{ width:250px; border-style:none solid solid solid; border-width:1px; border-color:#99ccff; background-color:#99ccff; } h5{ margin-bottom:0px; padding:0.5em; } どなたか知恵をお貸しください。よろしくお願いいたします。
- ベストアンサー
- HTML
- DIVの入り子のwidthの指定方法
DIVの入り子のwidthの指定方法がうまくいきません。 ＜ｃｓｓ＞ #main { width: 770px; margin: auto; padding: 0px; text-align: left; background-color: #cc0000; } .box_main{ width: 750px; background-color: #FFFFFF; margin: 0px 10px 10px 10px; padding: 0px; border: 0px; } .box_1{ margin: 5px 2px 5px 5px; padding: 0px; border: 0px; height: 299px; width: 236px; background: url(img/test2.jpg); float: left; } .box_2{ margin: 5px 5px 5px 0px; border: 0px; height: 295px; width: 491px; background-color: #33ff00; float: left; } .cl { clear: both; } この際、.box_mainの中にbox_1、box_2を横ならびにおきたいのですが うまくいきません。box_2のWIDTHの幅の指定がおかししのでしょうか？ HTMLは<html> <body> <div id="main"> <div class="box_main"> <div class="box_corner">あああああ</div> <div class="box_1"></div> <div class=box_2></div> <div class="cl"> </div> </div> </body> </html> です。
- 締切済み
- HTML
- HTML、ＣＳＳ が、なかなかうまくいきません。
お世話になります。 HTMLを始めたばかりですので、 ご教授いただけたら幸いです。 以下の図のような感じに並べたいのですが、 なかなかうまい具合にいきません。 黄色は、全てボタンになります。 赤は、ボタンについた吹き出し部分となります。 上段の２つのボタンは、やや大きい感じのボタン。 下段の３つのボタンは、上段に比べて、少し小さい感じのボタンになります。 ボタンは、上段(A)と下段(B)で、 HTML と CSS は、分けようかと考えています。 【HTML】 <div class="Button"> <div class="contents"> <div class="Button_boxA clearfix"> <div class="Yellow_Btn_01"><img src="img/Yellow_Btn_01.png" width="200" height="75" /> </div> <div class="Yellow_Btn_02"><img src="img/Yellow_Btn_02.png" width="200" height="80" /> </div> </div> <div class="btn_boxB clearfix"> <div class="Yellow_Btn_03"><img src="img/Yellow_Btn_03.png" width="100" height="60" /> </div> <div class="Yellow_Btn_04"><img src="img/Yellow_Btn_04.png" width="100" height="65" /> </div> <div class="Yellow_Btn_05"><img src="img/Yellow_Btn_05.png" width="100" height="60" /> </div> </div> </div> </div> 【 CSS 】 div.Button{ width:600px; margin-top:20px; margin-right:auto; margin-left:auto; padding-right:25px; } div.btn_boxA{ width::500px; margin-left:auto; margin-right:auto; margin-bottom:10px; } div.low_btn_01{ width:200px; height:75px; margin-left:auto; margin-right:auto; margin-bottom:10px; float:left; } div.low_btn_02{ width:200px; height:80px; margin-left:auto; margin-right:auto; padding-left:25px; margin-bottom:10px; float:left; } div.btn_boxB{ width::500px; margin-left:auto; margin-right:auto; margin-bottom:10px; } div.low_btn_03{ width:100px; height:60px; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-left:25px; float:left; } div.low_btn_04{ width:100px; height:65px; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-left:25px; float:left; ] div.low_btn_05{ width:100px; height:60px; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-left:25px; float:left; } 長ったらしくなってしまいましたが、 ご教授いただけたら、幸いです。 宜しくお願いします。
- 締切済み
- CSS
- ＣＳＳのどの部分を変更するとＨＴＭＬに反映されますか？
無料配布のwebテンプレートをお借りしてＨＰを作成しています サイドメニュー欄や本文の文字の装飾は結構今までも色々なテンプレートで行ってきましたが 今回お借りしたテンプレではどうしても文字の大きさや太字等の簡単な装飾や<ul>タグにstyle指定し以下の<li>リストの記号が出来ません。 何処を変更すると<font color="****">や<b>や<ul style="***">が反映されるのでしょうか？ cssの記述は /*ページ全体の指定*/ *{ margin:0; padding:0; font:normal normal 100% "ＭＳ ゴシック","Osaka",sans-serif; border:none; } body{ margin:0px; padding:0px; font-size:84%; background:#333333 url("img/bg.gif") repeat-x; color:#666666; } /*ページ全体のリンク指定*/ a{ color:#30B008; } /*ページの輪郭*/ #flame{ width: 780px; margin:0 auto; } /*ヘッダ*/ #head{ } /*サイト名前：ロゴを入れたりしてください*/ #logo{ font-size:300%; padding:20px 0; color:#ffffff; font-family:Arial Black; } /*ヘッダメニュー*/ #headmenu{ width:780px; height:40px; margin-bottom:10px; } #headmenu ul{ width:780px; list-style:none; } #headmenu li{ width:148px; height:40px; float:left; margin-right:10px; background:url("img/headmenu_a.gif") no-repeat; } #headmenu li a{ display:block; width:113px; height:27px; padding:13px 0 0 35px; text-decoration:none; color:#000000; } #headmenu li a:hover{ background:url("img/headmenu_ah.gif") no-repeat; } #headmenu li.rightbox{ margin:0; } /*サイドとメインをくくる*/ #centertop{ background:url("img/centertop.gif") no-repeat; height:10px; } #center{ background:url("img/centerbg.gif") repeat-y; } #centerbottom{ background:url("img/centerbottom.gif") no-repeat; height:10px; } /*サイドのブロック*/ #box_side{ width: 240px; float: left; } .menu{ width:200px; margin:20px; } h3{ font-weight:bold; color:#666666; height:25px; background:url("img/menutitlebg.gif") no-repeat; padding:5px 0 0 10px; } #box_side ul{ list-style:none; } #box_side li{ width:180px; margin:5px 10px; } #box_side li a{ text-decoration:none; color:#666666; } #box_side li a:hover{ color:#000000; } /*右のブロック*/ #box_main{ width: 540px; float: right; } /*右のタイトル部分*/ h1,h2{ font-weight:bold; color:#ffffff; background:url("img/subtitlebg.gif"); height:25px; padding:5px 0 0 10px; } /*メインの記事の部分*/ .main{ margin:20px 20px 0 20px; } /*本文をくる*/ p{ padding:15px 7px; line-height:150%; } です。 HTMLは （略） <!--メインのブロック--> <div id="box_main"> <div class="main"> <h1>H1大見出し</h1> <p> <b><font color="red" size="5">有難う</font></b> </p> <blockquote> 引用文blockquote引用文blockquote </blockquote> </div> <div class="main"> <h2>H2小見出し</h2> <p> P要素P要素 </p> </div> </div> <!--メインのブロック終わり--> <!--サイドのブロック--> <div id="box_side"> <div class="menu"> <h3>メニュー</h3> </div> <div class="menu"> <h3><center>各種表記</center></h3> <ul style="disc"> <li><a target="_blank" href="*******"><b>免責事項</b></a></li> <li><a target="_blank" href="*******"><b>プライバシーポリシー</b></a></li> <li><a target="_blank" href="*******"><b>特定商取引法に基づく表記</b>/a></li> <li><a href="#">リンクD</a></li> </ul> </div> です。 メインの<b><font color="red" size="5">有難う</font></b>の部分 サイドの<h3>各種表記</h3>以下に<b>タグと<ul>タグを入れてますが反映されません 初めてのケースですので悩んでます。 今後の為にもこのような場合CSSは何処を変更するのでしょうか？ 宜しくお願い致します。
- ベストアンサー
- レンタルサーバ・ASP
- IEとFireFoxでCSSの見た目をそろえたい
CSSの素人ですがボックスを使って2カラムスタイルのデザインを作ろうとしているのですが 完成したのをみるとIEとFireFoxで見た目変わりうまく調整できずに困っています。 足し算はあっているはずなのですがどこを修正すればよいのでしょうか？ HTML <body> <div id="wrapper"> <div id="container"> <div class="header"> <h1> </h1> </div> <div class="kaijyo"></div> <div class="main"> <div></div> <h2> </h2> <div class="kaijyo"></div> <div class="line"> <hr> </div> </div> <div class="menu"> </div> <div class="kaijyo"></div> <div class="footer"> <p> </p> </div> </div> </div> </body> CSS #wrapper{ text-align:center; /*IE対応*/ } #container { width: 980px; margin-left:auto; margin-right:auto; background-color:#CAB59B; text-align:left; } .header{ width: 970px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 10px; background-color:#6F0011; color:#000000; text-align:left; height:20px; } .main{ width: 670px; float: left; margin: 0px 0px 0px 0px; padding: 10px 15px 10px 15px; background-color:#E4E4E4; text-align:left; } .menu{ width: 260px; float: left; margin: 0px 0px 0px 0px; padding: 10px 10px 10px 10px; background-color:#CAB59B; text-align:left; } .footer{ width: 970px; float: left; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 10px; background-color:#6F0011; color:#FFFFFF; text-align:left; } .kaijyo{ clear: left; }
- ベストアンサー
- CSS
- cssでボックスを横並びにし、横幅指定してもくっついてしまう。
こんにちわ！ 只今CSS課題に取り組んでいるのですが、 フロートを使用し、写真（A）、テキスト（B）、写真（C）、テキスト（D）、と並べたいのですが、（B）に横幅指定しているにもかかわらず、（C）がＩＥではＯＫなのですが、FIREFOXではぴたっとくっついてしまいます。 【html】 <div class="box"> <div class="photo"><img src="img/photo_01.jpg" width="132" height="85"></div> <div class="txt">第23回こまったな<br>どうしたのかな賞<br>受賞</div></div> <div class="box"> <div class="photo"><img src="img/photo_02.jpg" width="132" height="85"></div> <div class="txt">第23回どなたかー<br>助けてください賞<br>受賞</div></div> </div> .box{ width : 258 px; margin: 0px; float:left; } .photo{ width : 132 px; margin: 0px; float:left; } .txt{ width : 123 px; color: #555555; font-size: 12px; text-align: left; margin: 0px 0px 0px 3px; padding: 0px ; line-height:18px; float:left; } となっております。 何故、ＩＥでは大丈夫でFirefoxでは内容によって横幅が変わってしまうのでしょうか？ ご教授願いませんでしょうか～？ 宜しくお願い致します。
- ベストアンサー
- HTML
- 急にCSSが反映されなくなった
質問お願いします。自社サイトの更新を担当することになったのですが、数日前まできちんとサイト上でも CSSが反映されていたのに、先日からいきなりCSSが反映されなくなり原因が分からず困っています。 当方、コードは読める位の超初心者レベルです。。 因みに、コードは下記のようになっています。（途中省略してあります）また、Dreamweaver8を使用しています。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta name="copyright" content="Nikukyu-Punch" /> <title>自社サイト</title> <meta name="description" content="○○" /> <meta name="keywords" content="○○" /> <link href="style.css" rel="stylesheet" type="text/css" /> <style type="text/css"> <!-- .style2 {font-size: 16px} .style8 {color: #3366FF} .style11 {color: #b65313; font-size: 14px; } .style12 {color: #b65313} --> </style> </head> <body> <div id="container"> <div id="header"> <h1>○○</h1> <a href="index.html"><img src="images/logo1.gif" alt="○○" name="logo" width="653" height="114" id="logo" /></a></div> <!--/header--> <div id="contents"> <div id="wrap"> <div id="main"> <h2>○○</h2> <br /> <p >○○</p> <div class="item-box"><img src="images/item/3401.jpg" alt="○" width="164" height="164" /><div class="box-btn3"><a href="○"><img src="images/new1.gif" alt="new" />○○<br /> </a></div> </div> <div class="item-box"><img src="images/item/3403.jpg" alt="○○）" width="164" height="164" /> <div class="box-btn3"><a href="○○">○○</a></div> </div> </div> <!--/main--> <div id="sub"> </div> <!--/wrap--> <div id="side"> <!--/side--> <div id="footer"> Copyright(C)○○ All Rights Reserved.<br /> </div> <!--/footer--> </div> <!--/contents--> </div> <!--/container--> </body> </html> ---------------------CSS----------------------------------- @charset "shift_jis"; body { font-family: "メイリオ", Meiryo,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size: 90%; line-height: 2; color: #333333; margin: 0px; padding: 0px; text-align: center; } /*コンテナー ---------------------------------------------------------------------------*/ #container { text-align: left; width: 1091px; margin-right: auto; margin-left: auto; border-top: 5px solid #ff476d; background-color: #FFFFFF; } /*３カラムを囲むボックス ---------------------------------------------------------------------------*/ #contents { clear: left; width: 100%; } /*左・中央を囲むボックス ---------------------------------------------------------------------------*/ #wrap { width: 897px; float: left; padding-bottom: 50px; margin-top: 20px; } /*中央ブロック ---------------------------------------------------------------------------*/ #main { float: right; width: 703px; } #main .item-box{ foat:left; width:200px; height:300px; border:1px #CCCCCC solid; padding:5px 5px 0px 5px; float: left; margin-top: 0px; margin-right: 6px; margin-bottom: 15px; margin-left: 15px; } #main .item-box img{ /*margin: 5px 0px 5px 5px;*/ margin-left:15px; border:solid #cccccc 1px; } #main .box-btn3 { font-size:10px; color: #333333; width:164px; text-align:center; padding: 0px 0px 0px 0px; margin-left:15px; border:1px #CCCCCC solid; } /*フッター ---------------------------------------------------------------------------*/ #footer { clear: both; width: 100%; text-align: center; border-top: 1px solid #bfbfbf; padding-top: 1em; padding-bottom: 1em; } どなたかご教授頂けたら助かります
- 締切済み
- デザイナー・クリエイティブ職
- 角丸にしたDiv内の画像の角がはみ出してしまう
よろしくお願いします。 参考書片手にCSSを勉強しています。 品物の画像をスマホで見られるページを作っているのですが、 角丸にしたDiv内の画像の角がはみ出してしまい、対処法がわからず悩んでいます。 どのような方法がありますでしょうか。 初歩的な質問で恐れ入りますがご教授お願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>じっけんじっけん</title> <style type="text/css"> <!-- body, p, h1, h2, h3, img, table, div, ul, li { margin: 0px; padding: 0px; font-family: Helvetica, sans-serif; } #wrap { background-color: #EEEEEE; height: auto; width: 100%; margin: 0px; padding-top: 100px; padding-right: 0px; padding-bottom: 50px; padding-left: 0px; } .title { width: 100%; margin-right: auto; margin-left: auto; } .main { background-color: #FFFFFF; width: 96%; margin-right: auto; margin-left: auto; box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2); box-shadow:0px 0px 2px #555; margin-bottom: 100px; border-radius: 20px; } p.resizeimage img { width: 100%; } .itemnum { color: #7D7D7D; font-size: 40px; padding: 30px; border-bottom-width: thin; border-bottom-color: #C0C0C0; line-height: 50px; float: left; } .price { color: #7D7D7D; font-size: 52px; padding: 30px; border-bottom-width: thin; border-bottom-style: solid; border-bottom-color: #C0C0C0; line-height: 60px; text-align: right; } .itemname { color: #7D7D7D; font-size: 40px; padding: 30px; border-bottom-width: thin; border-bottom-style: solid; border-bottom-color: #C0C0C0; line-height: 54px; font-weight: bold; } .detail { color: #7D7D7D; font-size: 40px; padding: 30px; border-bottom-width: thin; border-bottom-style: solid; border-bottom-color: #C0C0C0; line-height: 48px; } --> </style> </head> <body> <div id="wrap"> <div class="main"> <p class="resizeimage"> <img src="p/a.jpg"> </p> <p class="itemnum">32×13×22cm</p> <p class="price">￥10,000</p> <p class="itemname">アイテム</p> <p class="itemname">Ａタイプ</p> </div> <div class="main"> <p class="resizeimage"> <img src="p/b.jpg"> </p> <p class="itemnum">35×14×24cm</p> <p class="price">￥10,000</p> <p class="itemname">アイテム</p> <p class="itemname">Ｂタイプ</p> </div> </div> </body> </html>
- ベストアンサー
- CSS
