我目前正在做作业,我无法弄清楚为什么橙色容器列表中的文字不在橙色框中。盒子处于我希望它们所处的位置,但我不明白为什么这些字母处于一个完全不同的空间。不应该与元素相关联的文本与元素一起移动吗?我的意思是,为什么粉红色的盒子还可以,但不是橘子的盒子。我感谢任何帮助!
This is what my issue looks like
main {
margin: 0 auto;
width: 400px;
}
.clearfix::after {
content: "";
clear: both;
display: block;
}
.blue-container {
height: 100px;
width: 400px;
position: relative;
}
.top {
background-color: #141f40;
height: 100px;
width: 400px;
float: right;
}
.white-container {
background-color: white;
height: 60px;
width: 160px;
position: absolute;
top: 20px;
left:220px;
}
.white-container>li{
background-color: #a9004b;
height: 40px;
width: 40px;
float: left;
margin-left: 10px;
margin-top: 10px;
}
.left {
background-color: #80bfa8;
height: 250px;
width: 150px;
float: left;
}
.red {
background-color: #8c2727;
height: 250px;
width: 250px;
float: right;
}
.orange-container {
position: relative;
left: 180px;
top: 20px;
padding: 10px;
}
.orange-container>li{
background-color: #ff863f;
box-sizing: border-box;
height: 50px;
width: 150px;
border: 5px solid white;
margin-top: 10px;
}
.bottom {
background-color: #d98d30;
height: 100px;
width: 400px;
}
/* from yahoo ui */
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}

<head>
<title>Puzzle 3 Farshad</title>
<link rel="stylesheet" type="text/css" href="style3.css">
<!--link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css"-->
</head>
<body>
<main>
<div class="blue-container">
<div class="top">Top</div>
<ul class="white-container clearfix">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div class="clearfix">
<div class="left">Left</div>
<div class="red">Red</div>
<ul class="orange-container">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
<div class="bottom">Bottom</div>
</main>
</body>
&#13;
答案 0 :(得分:0)
您的问题是由于您的.red
元素已浮动(与.left
元素一样)。这意味着该区域中的任何文本内容都会在周围浮动 - 在这种情况下,它会被推下来。通常,这会使第一个li
元素更高到其文本(&#34; A&#34;)仍然在其橙色背景内,但*在浮动的红色区域下*。但是,由于您将li
元素的高度限制为50px,li
sselselvess保持原样,然而,他们的内容被推下 - 在li
的边界之外
如果你想要掌握情况,即两个浮动元素彼此相邻,第三个兄弟元素.orange-container
位于第二个(.red
)之上,你必须使用position: absolute
并调整位置设置,如下面的代码段所示(我只是将它们设置为近似给您一般印象)。
main {
margin: 0 auto;
width: 400px;
}
.clearfix::after {
content: "";
clear: both;
display: block;
}
.blue-container {
height: 100px;
width: 400px;
position: relative;
}
.top {
background-color: #141f40;
height: 100px;
width: 400px;
float: right;
}
.white-container {
background-color: white;
height: 60px;
width: 160px;
position: absolute;
top: 20px;
left:220px;
}
.white-container>li{
background-color: #a9004b;
height: 40px;
width: 40px;
float: left;
margin-left: 10px;
margin-top: 10px;
}
.left {
background-color: #80bfa8;
height: 250px;
width: 150px;
float: left;
}
.red {
background-color: #8c2727;
height: 250px;
width: 250px;
float: right;
}
.orange-container {
position: absolute;
left: 300px;
top: 120px;
padding: 10px;
}
.orange-container>li{
background-color: #ff863f;
box-sizing: border-box;
height: 50px;
width: 150px;
border: 5px solid white;
margin-top: 10px;
}
.bottom {
background-color: #d98d30;
height: 100px;
width: 400px;
}
/* from yahoo ui */
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}
&#13;
<head>
<title>Puzzle 3 Farshad</title>
<link rel="stylesheet" type="text/css" href="style3.css">
<!--link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css"-->
</head>
<body>
<main>
<div class="blue-container">
<div class="top">Top</div>
<ul class="white-container clearfix">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div class="clearfix">
<div class="left">Left</div>
<div class="red">Red</div>
<ul class="orange-container">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
<div class="bottom">Bottom</div>
</main>
</body>
&#13;
但我建议采取不同的方式:将.orange
作为.red
的子元素,从float: left
和.red
移除.left
,然后应用{ {1}} {和display: inline-block
){和vertical-align: top;
.orange
.red
的{@ 1}}个子元素,具有相对位置且符合top
和left
设置:
main {
margin: 0 auto;
width: 400px;
}
.clearfix::after {
content: "";
clear: both;
display: block;
}
.blue-container {
height: 100px;
width: 400px;
position: relative;
}
.top {
background-color: #141f40;
height: 100px;
width: 400px;
float: right;
}
.white-container {
background-color: white;
height: 60px;
width: 160px;
position: absolute;
top: 20px;
left:220px;
}
.white-container>li{
background-color: #a9004b;
height: 40px;
width: 40px;
float: left;
margin-left: 10px;
margin-top: 10px;
}
.left {
background-color: #80bfa8;
height: 250px;
width: 150px;
display: inline-block;
vertical-align: top;
}
.red {
background-color: #8c2727;
height: 250px;
width: 250px;
display: inline-block;
vertical-align: top;
}
.orange-container {
position: relative;
left: 30px;
top: 0px;
padding: 10px;
}
.orange-container>li{
background-color: #ff863f;
box-sizing: border-box;
height: 50px;
width: 150px;
border: 5px solid white;
margin-top: 10px;
}
.bottom {
background-color: #d98d30;
height: 100px;
width: 400px;
}
/* from yahoo ui */
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}
&#13;
<head>
<title>Puzzle 3 Farshad</title>
<link rel="stylesheet" type="text/css" href="style3.css">
<!--link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css"-->
</head>
<body>
<main>
<div class="blue-container">
<div class="top">Top</div>
<ul class="white-container clearfix">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div class="clearfix">
<div class="left">Left</div><div class="red">Red
<ul class="orange-container">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
</div>
<div class="bottom">Bottom</div>
</main>
</body>
&#13;
另请注意,我将<div class="red">
的开始标记向上移动,直接跟在前一个元素的结束标记之后,以避免这两个内联块之间的空格。