1つの内に4つの異なるdivを垂直に配置します。

私は4つのdivを持っています。彼らはすべて、相対的な配置で左に浮かんでいるので、すべてが一列に並んでいます。私はdivの "コンテナ"の中にそれらを垂直に配置したい。これどうやってするの？1つの内に4つの異なるdivを垂直に配置します。

<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
</head> 
<style type="text/css"> 
.titlefont{ 
font-family:"Lucida Console", Monaco, monospace;  
} 

div#saucelistdiv{ 
float:left; 
    width:auto; 
    margin:10px; 
    vertical-align:middle; 
    height:auto; 
} 
div#meatlistdiv{ 
    float:left; 
    width:auto; 
    margin:10px; 
    vertical-align:middle; 
    height:auto; 
} 
div#container{ 
    height:600px; 
    border:2px solid red; 
    width:auto; 
} 
#grainlistdiv{ 
float:left; 
    width:auto; 
    margin:10px; 
    vertical-align:middle; 
    height:auto; 
} 
div#veggielistdiv{ 
    float:left; 
    width:auto; 
    margin:10px; 
    vertical-align:middle; 
    height:auto; 
} 
#tablelist{ 
    border:2px solid; 
} 
</style> 
<body> 

<center> 
<div id="container"> 
<div id="saucelistdiv"><table id="tablelist"> 
    <span class="titlefont">SAUCES</span> 
    <tr><td><input type="radio" name="rbbase" value="Pizza Sauce" checked="checked" />Pizza Sauce</td></tr> 
    <tr><td><input type="radio" name="rbbase" value="Cheese Sauce" />Cheese Sauce</td></tr> 
    <tr><td><input type="radio" name="rbbase" value="Barbecue Sauce" />Barbecue Sauce</td></tr> 



    <tr><td><input type="radio" name="rbbase" value="Salsa" />Salsa</td></tr> 
    <tr><td><input type="radio" name="rbbase" value="Alfredo Sauce" />Alfredo Sauce</td></tr> 
    <tr><td><input type="radio" name="rbbase" value="Taco Sauce" />Taco Sauce</td></tr> 



    <tr><td><input type="radio" name="rbbase" value="Tzatziki (Cucumber) Sauce" />Tzatziki (Cucumber) Sauce</td></tr> 
    <tr><td><input type="radio" name="rbbase" value="Chicken Gravy" />Chicken Gravy</td></tr> 
    <tr><td><input type="radio" name="rbbase" value="Beef Gravy" />Beef Gravy</td></tr> 



    <tr><td><input type="radio" name="rbbase" value="Ranch Dressing" />Ranch Dressing</td></tr> 
    <tr><td><input type="radio" name="rbbase" value="1000 Island Dressing" />1000 Island Dressing</td></tr> 
    <tr><td><input type="radio" name="rbbase" value="Parmesan Peppercorn Dressing" />Parmesan Peppercorn Dressing</td></tr> 



    <tr><td><input type="radio" name="rbbase" value="Spaghetti Sauce" />Spaghetti Sauce</td></tr> 
    <tr><td><input type="radio" name="rbbase" value="Chili" />Chili</td></tr> 
    <tr><td><input type="radio" name="rbbase" value="Syrup" />Syrup</td></tr> 



    <tr><td><input type="radio" name="rbbase" value="Garlic Butter" />Garlic Butter</td></tr> 
    <tr><td><input type="radio" name="rbbase" value="Mayonnaise" />Mayonnaise</td></tr> 





    </table> 
    </div> 

<div id="meatlistdiv"> 
<span class="titlefont">MEATS</span> 
    <table class="center" id="tablelist"> 



     <tr><td><input type="checkbox" name="cbing" value="Sausage" />Sausage<br /></td></tr> 
     <tr><td><input type="checkbox" name="cbing" value="Pepperoni" />Pepperoni<br /></td></tr> 
     <tr><td><input type="checkbox" name="cbing" value="Diced Ham" />Diced Ham<br /></td></tr> 
     <tr><td><input type="checkbox" name="cbing" value="Beef" />Beef<br /></td></tr> 
     <tr><td><input type="checkbox" name="cbing" value="Bacon" />Bacon<br /></td></tr> 
     <tr><td><input type="checkbox" name="cbing" value="Lamb" />Lamb<br /></td></tr> 
     <tr><td><input type="checkbox" name="cbing" value="Bratwurst" />Bratwurst<br /></td></tr> 
     <tr><td><input type="checkbox" name="cbing" value="Chicken" />Chicken<br /></td></tr> 
     <tr><td><input type="checkbox" name="cbing" value="Shrimp" />Shrimp<br /></td></tr> 
     <tr><td><input type="checkbox" name="cbing" value="Crab" />Crab<br /></td></tr> 
     <tr><td><input type="checkbox" name="cbing" value="Seasoned Beef" />Seasoned Beef<br /></td></tr> 
     <tr><td><input type="checkbox" name="cbing" value="Corned Beef" />Corned Beef<br /></td></tr> 
     <tr><td><input type="checkbox" name="cbing" value="Turkey" />Turkey<br /></td></tr> 
     <tr><td><input type="checkbox" name="cbing" value="Eggs" />Eggs<br /></td></tr> 




    </table> 
    </div> 

    <div id="grainlistdiv"> 
    <span class="titlefont">GRAINS</span> 
    <table class="center" id="tablelist"> 
     <tr><td><input type="checkbox" name="cbing" value="Elbow Macaroni" />Elbow Macaroni<br /></td></tr> 
     <tr><td><input type="checkbox" name="cbing" value="Spaghetti Noodles" />Spaghetti Noodles<br /></td></tr> 
     <tr><td><input type="checkbox" name="cbing" value="Oyster Crackers" />Oyster Crackers<br /></td></tr> 
     <tr><td><input type="checkbox" name="cbing" value="Goldfish" />Goldfish<br /></td></tr> 
     <tr><td><input type="checkbox" name="cbing" value="Mini Pancakes" />Mini Pancakes<br /></td></tr> 
     <tr><td><input type="checkbox" name="cbing" value="Pretzels" />Pretzels<br /></td></tr> 
     <tr><td><input type="checkbox" name="cbing" value="Stuffing" />Stuffing<br /></td></tr> 
     <tr><td><input type="checkbox" name="cbing" value="Taco Chips" />Taco Chips<br /></td></tr> 
     <tr><td><input type="checkbox" name="cbing" value="Ramen Noodles" />Ramen Noodles<br /></td></tr> 
    </table> 
    </div> 

    <div id="veggielistdiv"> 
    <span class="titlefont">VEGGIES/OTHER</span> 
    <table class="center" id="tablelist"> 
     <tr><td><input type="checkbox" name="cbing" value="Lettuce" />Lettuce<br /></td></tr> 
     <tr><td><input type="checkbox" name="cbing" value="Tomatoes" />Tomatoes<br /></td></tr> 
     <tr><td><input type="checkbox" name="cbing" value="Onions" />Onions<br /></td></tr> 
     <tr><td><input type="checkbox" name="cbing" value="Green Peppers" />Green Peppers<br /></td></tr> 
     <tr><td><input type="checkbox" name="cbing" value="Green Olives" />Green Olives<br /></td></tr> 
     <tr><td><input type="checkbox" name="cbing" value="Black Olives" />Black Olives<br /></td></tr> 
     <tr><td><input type="checkbox" name="cbing" value="Pineapple" />Pineapple<br /></td></tr> 
     <tr><td><input type="checkbox" name="cbing" value="Sauerkraut" />Sauerkraut<br /></td></tr> 
     <tr><td><input type="checkbox" name="cbing" value="Broccoli" />Broccoli<br /></td></tr> 
     <tr><td><input type="checkbox" name="cbing" value="Cauliflower" />Cauliflower<br /></td></tr> 
     <tr><td><input type="checkbox" name="cbing" value="Jalapeno Peppers" />Jalapeno Peppers<br /></td></tr> 
     <tr><td><input type="checkbox" name="cbing" value="Pickles" />Pickles<br /></td></tr> 
     <tr><td><input type="checkbox" name="cbing" value="Cucumbers" />Cucumbers<br /></td></tr> 
     <tr><td><input type="checkbox" name="cbing" value="Carrots" />Carrots<br /></td></tr> 
     <tr><td><input type="checkbox" name="cbing" value="Mushrooms" />Mushrooms<br /></td></tr> 
    </table> 
    </div> 


    </div> 
</body> 
</html>

出典

2012-04-12 Wilson

私はあなたがあなたのfloat:left;display:inline-block;にを変更した場合、あなたはあなたが探している効果を得ると確信しています。

出典

2012-04-12 20:46:08 Neil

縦型は表のみです。だから、あなたは、テーブルとしてこの方法でをdiv要素を使用することができます。

div#container 
{ 
    height: 600px; 
    border: 2px solid red; 
    width: auto; 
    //add these rows 
    display: table-cell; 
    vertical-align: middle; 
}

出典

2012-04-12 20:44:32

また、（これはjQueryのを使用しています）のjavascriptのビットで、これを達成することができます

(document).ready(function() { 
    $("#container").children().each(function() { 
     var parentHeight = $(this).parent().height(); 
     var myHeight = $(this).height(); 
     $(this).css('top', (parentHeight - myHeight)/2); 
    }); 
});

出典

2012-04-12 20:48:29

あなたがのdiv＃コンテナに幅の大きさを与え、autoにマージンを設定した場合、それが動作するはずです：

div#container{ 
    height:600px; 
    border:2px solid red; 
    width:700px; 
    margin:auto; 
}

*私が実際に質問を理解したかどうかはわかりませんが、それは見栄えがいいです:-)

出典

2012-04-12 21:00:07 Skunkman

1つの内に4つの異なるdivを垂直に配置します。

答えて

関連する問題