我很难在两个div中间创建一个分区，我的页脚也没有贴到底部
我现在正在学习css。我在做一个作业，我必须遵循一组指令，并添加css规则，使页面看起来有一定的方式，并使我理解不同的规则。我完全按照说明去做，但是我的页面看起来和作业中的页面有很大的不同。说明如下。
在html文档正文头部的样式标记之间包含以下两个CSS规则{font-family：Calibri,Sans-serif；background-color:#CAFeb8；}header{border:1px纯黑色；margin:1%；padding:0 10px；background-color:#89FC63；}
为“成分”部分编写一个CSS规则。创建一个1px宽度b的实心黑色边框。在所有四个边（上、右、下、左）上创建1%的边距。在所有四个边d上创建10px的填充。将部分的背景颜色设置为淡蓝色（十六进制代码#B4D1B6)e。将节的宽度设置为45%f。将截面高度设置为60%g。向左浮动节
控件的方法节编写一个CSS规则。创建一个1px宽度b的实心黑色边框。在所有四个边（上、右、下、左）上创建1%的边距。在所有四个边d上创建10px的填充。将节的背景色设置为淡橙色（十六进制代码#FFFF99)E。将截面的高度设置为60%f。将节向右浮动
控件的页脚部分编写一个CSS规则。创建一个1px宽度b的实心黑色边框。在所有四个边（上、右、下、左）上创建1%的边距。在左侧和右侧创建10px的填充，在顶部和底部d创建0的填充。将部分的背景颜色设置为淡绿色（十六进制代码#AAFD8E)
null
body {
font-family: Calibri, sans-serif;
background-color: #CAFEB8;
}
header {
border: 1px solid black;
background-color: #89FC63;
margin: 1%;
padding: 0 10px
}
#ingredients {
border: 1px solid black;
background-color: #B4D1B6;
float:left;
height: 60%;
width: 40;
float:left;
margin:1%;
padding:10px;
}
#method {
border: 1px solid black;
background-color: #FFFF99;
height: 60%;
padding: 10px;
float: right;
margin: 1%;
}
footer
{
border: 1px solid black;
margin: 1%;
background-color:#AAFD8E
padding-left: 10px;
padding-right: 10px;
padding-top: 0px;
padding-bottom: 0px;
}html lang-html prettyprint-override"><body>
<header>
<h1>Curried Chicken in Coconut Milk</h1>
<p> Thai curries are quick & easy to prepare, especially now that most supermarkets
sell authentic ready-made curry pastes flavoured with chilli, ginger, garlic, lemon grass & spices.</p>
<p> Serves 4-6 </p>
</header>
<div id = "ingredients">
<h2> Ingredients: </h2>
<ul>
<li> 1 tablespoon sunflower oil </li>
<li> 4 skinless chicken breast fillets, sliced </li>
<li> 1 large onion, finely chopped </li>
<li> 2 garlic cloves, finely chopped </li>
<li> 1 tablespoon freshly grated root ginger </li>
<li> 1 large red pepper, deseeded and chopped roughly </li>
<li> 3 carrots, peeled and chopped roughly </li>
<li> 2 tablespoons Thai red curry paste </li>
<li> 1/2 pint <!-- insert span here --> (300 ml) chicken stock </li>
<li> 14 oz (400g) can coconut milk </li>
<li> 2 tablespoons caster sugar </li>
<li> good pinch salt </li>
<li> juice of 1 lime </li>
<li> chopped fresh coriander leaves, to garnish </li>
<li> Thai fragrant or basmati rice, to serve </li>
</ul>
</div>
<div id = "method">
<h2> Method: </h2>
<ol>
<li> Heat a wok until very hot. Add the oil and heat until it is almost smoking, swirling around the sides.
Tip in the chicken breast and cook for a few minutes, until lightly browned.</li>
<li> Add the onion, garlic and ginger to the wok and cook for another 3-4 minutes, until softened. Add the red pepper and carrot.
Stir in the curry paste and cook for 2 minutes, stirring continuously. Pour in the chicken stock and coconut milk and bring to
a gentle simmer. Stir in the sugar and salt.</li>
<li> Add enough lime juice to taste and simmer gently for 10-15 minutes, until the sauce has slightly reduced and the chicken
is completely tender.</li>
<li> To serve, divide among warmed wide-rimmed bowls & sprinkle over the coriander, then serve with the Thai fragrant or basmati rice
</li>
</ol>
</div>
<footer>
<p> <strong> The Wrens Kitchen </strong> </p>
</footer>
</body>
null
为什么页脚不贴底？为什么我不能把这两个divs分开？
共有2个答案
为“成分”部分编写一个CSS规则。创建一个1px宽度b的实心黑色边框。在所有四个方面创造1%的余量（顶部，正确...
我想他们是要被分成几个部分吧？
<header>
<h1>Curried Chicken in Coconut Milk</h1>
<p> Thai curries are quick & easy to prepare, especially now that most supermarkets sell authentic ready-made curry pastes flavoured with chilli, ginger, garlic, lemon grass & spices.</p>
<p> Serves 4-6 </p>
</header>
<section id="ingredients">
<h2> Ingredients: </h2>
<ul>
<li> 1 tablespoon sunflower oil </li>
<li> 4 skinless chicken breast fillets, sliced </li>
<li> 1 large onion, finely chopped </li>
<li> 2 garlic cloves, finely chopped </li>
<li> 1 tablespoon freshly grated root ginger </li>
<li> 1 large red pepper, deseeded and chopped roughly </li>
<li> 3 carrots, peeled and chopped roughly </li>
<li> 2 tablespoons Thai red curry paste </li>
<li> 1/2 pint
<!-- insert span here -->(300 ml) chicken stock </li>
<li> 14 oz (400g) can coconut milk </li>
<li> 2 tablespoons caster sugar </li>
<li> good pinch salt </li>
<li> juice of 1 lime </li>
<li> chopped fresh coriander leaves, to garnish </li>
<li> Thai fragrant or basmati rice, to serve </li>
</ul>
</section>
<section id="method">
<h2> Method: </h2>
<ol>
<li> Heat a wok until very hot. Add the oil and heat until it is almost smoking, swirling around the sides. Tip in the chicken breast and cook for a few minutes, until lightly browned.</li>
<li> Add the onion, garlic and ginger to the wok and cook for another 3-4 minutes, until softened. Add the red pepper and carrot. Stir in the curry paste and cook for 2 minutes, stirring continuously. Pour in the chicken stock and coconut milk and bring
to a gentle simmer. Stir in the sugar and salt.</li>
<li> Add enough lime juice to taste and simmer gently for 10-15 minutes, until the sauce has slightly reduced and the chicken is completely tender.</li>
<li> To serve, divide among warmed wide-rimmed bowls & sprinkle over the coriander, then serve with the Thai fragrant or basmati rice
</li>
</ol>
</section>
<section id="footer">
<p> <strong> The Wrens Kitchen </strong> </p>
</section>
body {
font-family: Calibri, sans-serif;
background-color: #CAFEB8;
}
header {
border: 1px solid black;
background-color: #89FC63;
margin: 1%;
padding: 0 10px;
}
#ingredients {
border: 1px solid black;
background-color: #B4D1B6;
height: 60%;
width: 45%;
float: left;
margin: 1%;
padding: 10px;
}
#method {
border: 1px solid black;
background-color: #FFFF99;
height: 70%;
padding: 10px;
margin: 1%;
width: 45%;
float: right;
}
#footer {
border: 1px solid black;
margin: 1%;
background-color: #AAFD8E padding-left: 10px;
padding: 0 10px 0 0;
clear: left;
}
对我来说很好。https://jsfidle.net/thielicious/9mdfftba/
回答你的问题
- 为什么页脚不贴底？
- 为什么我不能分割这两个div？
请参阅基于您的代码的此示例。
这就要看你说的贴底是什么意思了。由于更改了方法和成分的浮动，此浮动规则适用于页脚
由于float不在流中，因此在float框之前和之后创建的未定位块框垂直流动，就好像float不存在一样。
要将footer放置在浮动框下面，您可以使用clear:both将html" target="_blank">控制流置于浮动框旁边：
要求框的上边框边缘位于源文档前面元素生成的任何右浮动框和左浮动框的下外缘以下。
添加clear:both；可以处理浮动：
footer{
background-color:#AAFD8E; /* a ; was missing */
padding: 0px 10px 0px 10px;
clear: both; /* i added clear:both */
}
将页脚设置到底部
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
}
关于浮动元素
如果没有足够的水平空间供浮子使用，则将浮子向下移动，直到浮子适合或者浮子不再存在。
在成分的样式规则中，您编写了宽度:40但它必须是宽度:
并且
是一个
后面紧跟一个单位标识符。
#ingredients {
float:left;
width: 40ex; /* unit ex added */
}
#method {
margin: 0 0 0 50ex; /* margin left 50ex added */
}
对于浮动divs，您可能会发现two-divs-side-by-side-fluid-display很有帮助。float上的CSS2.2中的文本可能有助于理解这些规则。
为了提高可维护性，我将创建一个类.base，它涵盖了几个样式规则。由于页脚的规则类似，我将添加另一个规则：
.base { border:1px solid black; margin: 1%; padding: 10px;}
.basefooter { border:1px solid black; margin: 1%; padding: 0 10px}
-
我要做的是让用户输入一个分子和一个分母，并显示商。我正在使用一个方法，使用Integer.Parseint和try catch来检查并查看该数字是否有效。问题是，如果try catch捕获异常并显示错误，它将继续到代码的下一部分，而不是跳回到循环的开始。 基本上，我想调用IsValid（分子）并将其赋给int“num”，如果IsValid的catch语句被执行，则跳回到do循环的开头，以便它再次显
-
一个普通的层中的第一个参数也是，是该层中神经元/节点的数量。然而，标准的LSTM单元如下所示： （这是《了解LSTM网络》的返工版） 在Keras中，当我创建这样的LSTM对象时，，我是否真的创建了这些LSTM单元的？还是LSTM单元内“神经网络”层的大小，即公式中的？还是别的什么？ 对于上下文，我正在基于这个示例代码工作。 以下是留档：https://keras.io/layers/recurr
-
我有一个web应用程序，用户可以点击按钮来引擎对象。 我用Javascript编写了下面的方法，它工作了。但是，如果有2个或3个以上的用户在克隆，就会弹出随机错误。例如，它会说，或。 但如果只有一个人在做，它就永远不会有错误。 所以我在想，有没有更好的写法： 我尝试过这样做，但它生成空值： 所以我一定是做错了什么，我希望有人能给我指明正确的方向。 谢谢！
-
问题内容： 1与右侧的滚动条股利时，有很多它的文本。1尝试加载网页时，但凌晨1点运气不好使用此代码滚动到一个div的底部。怎样才能实现？ 风格; JavaScript代码： 问题答案： $(function() { 编辑 ：对于谁是滚动寻找一个不错的小动画的人： http://jsfiddle.net/o98zbx8j
-
在桌面视图中，输出是正确的，但在移动视图中，我们希望生成每个div都有自己的描述。 现在我的问题是描述显示在所有四个元素之后，我们希望在移动视图中显示每个div的底部。 任何人都可以通过jQuery帮助我。我试图在jQuery的帮助下使用偏移量和高度，但这是行不通的。 null null
-
问题内容： 我正在努力从使用表格进行布局过渡到使用div（是的，是的，是伟大的辩论）。我有3个div，页眉，内容和页脚。页眉和页脚各为50px。如何使页脚div停留在页面底部，而内容div填充两者之间的空间？我不想硬编码内容div的高度，因为屏幕分辨率会改变。 问题答案： 使用flex布局，我们可以在实现自然高度的页眉和页脚的同时实现这一目标。页眉和页脚都将分别贴在视口的顶部和底部（非常类似于本机