我无法在两个 div 中间创建一个分区，我的页脚也没有粘在底部
Posted
技术标签:
【中文标题】我无法在两个 div 中间创建一个分区，我的页脚也没有粘在底部【英文标题】：I'm having trouble creating a division in the middle of two divs, My footer also isnt sticking to the bottom 【发布时间】：2017-04-10 23:57:09 【问题描述】：我现在正在学习 CSS。我正在做一项任务，我必须遵循一组说明并添加 css 规则，以使页面看起来以某种方式并让我理解不同的规则。我完全按照说明进行了操作，但是我的页面与作业中的页面看起来有很大不同。说明如下。
在 html 文档头部的样式标签之间包含以下两个 CSS 规则 身体 字体系列：Calibri，无衬线； 背景颜色：#CAFEB8； 标题 边框：1px纯黑色； 保证金：1%； 填充：0 10px； 背景颜色：#89FC63；
为成分部分编写一个 CSS 规则 一种。创建一个 1px 宽的纯黑色边框 湾。在所有四个边（上、右、下、左）上创建 1% 的边距 C。在所有四个边上创建 10px 的填充 d。将部分的背景颜色设置为淡蓝色（十六进制代码 #B4D1B6） e.将部分的宽度设置为 45% F。将部分的高度设置为 60% G。向左浮动部分
为方法部分编写 CSS 规则 一种。创建一个 1px 宽的纯黑色边框 湾。在所有四个边（上、右、下、左）上创建 1% 的边距 C。在所有四个边上创建 10px 的填充 d。将部分的背景颜色设置为淡橙色（十六进制代码#FFFF99） e.将部分的高度设置为 60% F。使部分向右浮动
为页脚部分编写一个 CSS 规则 一种。创建一个 1px 宽的纯黑色边框 湾。在所有四个边（上、右、下、左）上创建 1% 的边距 C。在左侧和右侧创建 10px 的填充，在顶部和底部创建 0 填充 d。将部分的背景颜色设置为浅绿色（十六进制代码 #AAFD8E）
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;
<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>
为什么页脚没有粘在底部？为什么我不能划分两个div？
【问题讨论】：
您可以使用clear: both; 将页脚放在页脚内，而缺少;。我modified your code 并添加了section。 CSS 2.2 on float 处的文字可能有助于理解规则。对于浮动 div，您可能会发现 two-divs-side-by-side-fluid-display 很有帮助。
【参考方案1】：
为 section 的成分编写 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://jsfiddle.net/Thielicious/9mdfftba/
【讨论】：
您提供的解决方案/代码在窗口变小时会引入一些问题。 然而它对我有用，只有当你真的让它变得非常不切实际的小它不会，但很多页面也是如此。您的任务描述含糊其辞。这一切都在你的任务中描述......【参考方案2】：解决您的问题
-
为什么页脚不粘在底部？
为什么我不能分割两个div？
样本
见this sample based on your code。
关于问题 1 页脚
这取决于你所说的坚持到底是什么意思。既然你改变了method和ingredients的浮动this floating rules applies for footer
由于浮动不在流中，因此创建了非定位块框 前后浮动框垂直流动，好像浮动没有 存在。
使用clear: both 将footer 放置在您拥有control flow next to floats 的浮动框下方：
要求框的顶部边框边缘低于底部外部 任何右浮动和左浮动框的边缘 源文档中较早的元素。
添加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;
关于问题2划分两个div
关于floated elements
如果没有足够的水平空间放置浮动，它会被移动 向下直到它适合或没有更多的浮动。
在ingredients 的样式规则中，您写了width:40，但它必须是width:<length>，而<length> 是一个<number>，紧跟一个单元标识符。
#ingredients
float:left;
width: 40ex; /* unit ex added */
#method
margin: 0 0 0 50ex; /* margin left 50ex added */
对于浮动 div，您可以 find two-divs-side-by-side-fluid-display 提供帮助。 CSS 2.2 on float 处的文字可能有助于理解规则。
附加信息
为了提高可维护性，我将创建一个涵盖多个样式规则的类.base。由于页脚的规则相似，我将添加另一条规则：
.base border:1px solid black; margin: 1%; padding: 10px;
.basefooter border:1px solid black; margin: 1%; padding: 0 10px
【讨论】：
以上是关于我无法在两个 div 中间创建一个分区，我的页脚也没有粘在底部的主要内容，如果未能解决你的问题，请参考以下文章