0
私はCSSとHTMLに問題がありますが、回避策を見つけることができません。私は6つのdivのセットをページの上部に置くようにしています。divにはちょうどテキストが入っていて、その下に3 divの幅があり、それぞれにテキストとイメージが混在しています。現在起こっていることは、上部6ブロックが上部に正しく表示されていることです。次に、3 divのセットを含む大きな空白があります。それらの間にあると思われるテキストはまったく表示されません。私のHTMLコードは次のとおりです。Divのお互いに垂直に積み重ねることを拒否する
<div class="page">
<a href="/menu/kale-grain-bowls"><div class="col-m-2 col-2 kale-grain-bowls">Kale & Grain Bowls</div></a>
<a href="/menu/salads"><div class="col-m-2 col-2 salads">Salads</div></a>
<a href="/menu/burgers-sandwiches"><div class="col-m-2 col-2 burgers-sandwiches">Burgers & Sandwiches</div></a>
<a href="/menu/sides"><div class="col-m-2 col-2 sides">Sides</div></a>
<a href="/menu/smoothies-shakes"><div class="col-m-2 col-2 smoothies-milkshake">Smoothies & Milkshakes</div></a>
<a href="/menu/kids-real-meals"><div class="col-m-2 col-2 kids-real-meals">Kid's Real Meals</div></a>
<div class="menu-type>Kale & Grain Bowls</div>
<div class="foodcontent">
<div class="foodblock col-m-3 col-3"><a href="kale-grain-bowls/spicy-avocado-lime"><div class="spicy-avocado-lime">SPICY AVOCADO & LIME</div></a>
<div class="textblock">kale, sautéed veggies, avocado, black beans, corn, grape tomato, queso fresco, lime, cilantro, chipotle puree, red pepper vinaigrette</div></div>
<div class="foodblock col-m-3 col-3"><a href="kale-grain-bowls/toasted-almond-ginger"><div class ="toasted-almond-ginger">TOASTED ALMOND & GINGER</div </a>
<div class="textblock">kale, sautéed veggies, bok choy, tamari almonds, red cabbage, enoki mushrooms, mint, toasted almond-ginger sauce</div></div>
<div class="foodblock col-m-3 col-3"><a href="kale-grain-bowls/local-apple-bacon"><div class="local-apple-bacon-bowl">LOCAL APPLE & BACON BOWL</div></a>
<div class="textblock">kale, avocado, NH slab bacon, local apples, cherries, dried cranberries, sunflower seeds, scallions, red wine vinegar, olive oil</div </div>
<div class="foodblock col-m-3 col-3"><a href="kale-grain-bowls/power-bowl"><div class="power-bowl">POWER BOWL</div></a>
<div class="textblock">kale, sesame carrots, Brussels sprouts, crunchy chickpeas, pepitas, local egg, tomato vinaigrette</div></div>
<div class="foodblock col-m-3 col-3"><a href="kale-grain-bowls/farmstand- tomato-basil"><div class="farmstand-tomato-basil">FARMSTAND TOMATO-BASIL</div></a>
<div class="textblock">kale, yellow & green beans, corn, heirloom tomatoes, grilled halloumi cheese, lima beans, Kalamata olives, sunflower seeds, basil vinaigrette</div>
</div></div></div>
私のCSSは次のとおりです。
.foodblock{
float: left;
margin: 10px;
height: 400px;
bottom: 50px;
}
.textblock{
float: left;
margin: 20px;
text-align: center;
}
.menu-type{
text-align: center;
font-weight: bold;
font-family: "Times New Roman", Georgia, Serif;
font-size: 2.5em;
}
.spicy-avocado-lime{
height: 200px;
background-image: url('../images-source/communitybottom.png');
float: left;
width: 100%;
}
.toasted-almond-ginger{
height: 200px;
background-image: url('../images-source/communitybottom.png');
float: left;
width: 100%;
}
.local-apple-bacon-bowl{
height: 200px;
background-image: url('../images-source/communitybottom.png');
float: left;
width: 100%;
}
.power-bowl{
height: 200px;
background-image: url('../images-source/communitybottom.png');
float: left;
width: 100%;
}
.farmstand-tomato-basil{
height: 200px;
background-image: url('../images-source/communitybottom.png');
float: left;
width: 100%;
}
.foodcontent{
bottom: 500px;
}
あなたがこの問題を引き起こしている可能性がどのような任意のアイデアを持っている場合、助けてください。
私はそれがこれらの3つの選択肢の一つだ賭け..あなたがその空白が来ている場所をすぐに見ることができるように要素を検査する開発ツール/放火犯などを使用することをお勧め：、マージン、パディング行の高さ – Hardy
私はページの要素を調べて、私は新しい知識を得ていません。それは、それがページ全体の一部であるページdivの一部であるということを教えてくれるだけです。 –