2-16这道题是利用浮动定位在盒子边框中间吗？老师您是如何快速准确的实现浮动定位呢。
来源：2-17 自由编程
Vigorous阿炎
2020-10-20 13:26:42
2-16这道题自己的思路是，设置浮动然后利用margin属性设置位移，最后利用border属性制作出三角形。
但是发现在实现浮动的途径，数据有些不对。 这道题是利用浮动定位在盒子边框中间吗？老师您是如何快速准确的实现浮动定位呢。
css.css
*{
margin: 0;
padding: 0;
}
ol,ul{
list-style: none;
}
body{
font: normal 15px/25px "微软雅黑";
}
a{
text-decoration: none;
}
.moxing{
width: 100%;
background-color: rgb(219, 119, 119);
}
.moxing .wenz{
width: 25%;
height: 380px;
background-color: rgb(148, 211, 236);
}
.moxing .wenz h2{
margin-left: 20px;
font-size: 24px;
color: white;
padding-top: 20px;
margin-bottom: 30px;
}
.moxing .wenz .a1{
font-size: 16px;
color:white;
margin-left: 20px;
margin-right: 20px;
}
.moxing .wenz .a2{
font-size: 14px;
color: gray;
padding: 20px;
}
.moxing .wenz input{
display: block;
margin: 0 auto;
margin-top: 30px;
width: 138px;
height: 40px;
background-color: #000;
color: white;
}
img{
display: block;
width: 25%;
height: 380px;
}
.moxing .c1,.b1,
.moxing .c2,.b2,
.moxing .c3,.b3,
.moxing .c4,.b4{
float: left;
}
.
width: 20px;
height: 40px;
border-right: 20px;
}
.moxing .b1{
}
.moxing .b1 .box1{
float: left;
margin-left: -60px;
margin-top: 100px;
border:20px solid transparent;
border-right: 40px solid red;
}
2-16.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>4-10</title>
<link rel="stylesheet" href="css/4-10.css">
</head>
<body>
<div class="moxing">
<img class="c1" src="images/素材/b1.jpg" alt="">
<div class="wenz b1">
<h2>Library</h2>
<div class="box1"></div>
<!-- span为行内元素所以使用margin无效。 -->
<p class="a1">Lorem Ipsum is simply dummy text of the printing
and typesetting industry
</p>
<p class="a2">
Lorem Ipsum has been the industry's standard dummy text ever
since the 1500s, when an unknow printer took a galley of type
and scrambled it to make a type specln book.
</p>
<input class="a3" type="submit" value="EXPLORE">
</div>
<img class="c2" src="images/素材/b2.jpg" alt="">
<div class="wenz b2">
<h2>Library</h2>
<p class="a1">Lorem Ipsum is simply dummy text of the printing
and typesetting industry
</p>
<p class="a2">
Lorem Ipsum has been the industry's standard dummy text ever
since the 1500s, when an unknow printer took a galley of type
and scrambled it to make a type speclmen book.
</p>
<input type="submit" value="EXPLORE">
</div>
<div class="wenz b3">
<h2>Library</h2>
<p class="a1">Lorem Ipsum is simply dummy text of the printing
and typesetting industry
</span>
<p class="a2">
Lorem Ipsum has been the industry's standard dummy text ever
since the 1500s, when an unknow printer took a galley of type
and scrambled it to make a type specimen book.
</p>
<input type="submit" value="EXPLORE">
</div>
<img class="c3" src="images/素材/b3.jpg" alt="">
<div class="wenz b4">
<h2>Library</h2>
<p class="a1">Lorem Ipsum is simply dummy text of the printing
and typesetting industry
</p>
<p class="a2">
Lorem Ipsum has been the industry's standard dummy text ever
since the 1500s, when an unknow printer took a galley of type
and scrambled it to make a type speclmen book.
</p>
<input type="submit" value="EXPLORE">
</div>
<img class="c4" src="images/素材/b4.jpg" alt="">
</div>
</body>
</html>
在这里输入代码，可通过选择【代码语言】突出显示
1回答
-
同学你好，解答如下：
1、是的，通过定位 （position）让指向三角形定在盒子中间；
2、主要是通过父级相对定位、自己绝对定位实现的，如下：
3、有几句代码是有问题的，如下：
1
相似问题