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