人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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個ずつ表示させるにはどのようにしたら良いでしょうか?

1487319107
●拡大する

●質問者: 匿名質問者
●カテゴリ:ウェブ制作
○ 状態 :回答受付中
└ 回答数 : 0/0件

回答がありません
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ