匿名質問者
匿名質問者匿名質問者とは「匿名質問」を利用して質問した質問者。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら

1487319107 divの幅をレスポンシブに指定したいけどどうしたら…


ボタンを横2個で並べたいです。
文字はテキスト・枠・背景色・角丸・余白等は全てCSSで設定できたらと思います。

htmlはとりあえずこんな感じです。
<div class="area">
<div class="area_name">名称1</div>
 <div class="area_name">名称2</div>
<div class="area_name">名称3</div>
 <div class="area_name">名称4</div>
</div>

cssは以下の通りです。
.area{
background-color:#B5742C;
padding:30px 0 10px;
color:#FFF;
font-weight:bold;
width:100%;
overflow:hidden;
}
.area_name{
float:left;
width:40%;
border:2px solid #fff;
padding:10px;
margin:2%;
}

chromeのデベロッパツールでしか確認していないのですが、端末によって横1つにしかならない物がいくつかあります。
どうにかしてどの端末でもmargin+borderで綺麗に2個ずつ表示させるにはどのようにしたら良いでしょうか?

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2017/02/17 17:11:47
  • 終了:2017/02/24 17:15:11

回答(0件)

回答はまだありません

  • 匿名回答1号
    匿名回答1号 2017/02/21 22:17:43
    BootstrapのGrid systemを利用すると簡単にできると思います。
    オリジナルのCSSにする場合も参考にしてみてください。

    ・Grid system
    http://getbootstrap.com/css/#grid

    Example: Mobile and desktopより抜粋
    <!-- Columns are always 50% wide, on mobile and desktop -->
    <div class="row">
    <div class="col-xs-6">.col-xs-6</div>
    <div class="col-xs-6">.col-xs-6</div>
    </div>

    Responsive utilitiesのTest casesのようにGrid systemを利用したdiv内にspanでボタンを作成して、これにborder、background-color、border-radiusを指定します。
    詳しくはデベロッパーツールなどでHTMLソースとCSSを確認してください。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません