所以，我正在尝试为我的 tumblr 创建一个常见问题解答页面，并且我希望每个问题/答案都有相同大小的框、字体和图标，所以我使用的是类，但我很难处理文本，但是我终于设法得到它!问题是，图标。我一直在努力让它重复并均匀定位？ (因为它与文本相比太高了一点)但我就是想不通。我试过 margin 定位，position:absolute;漂浮但似乎没有任何锻炼。
body{
background-color: #fff;
margin: auto;
}
#container{
background-color: #000;
width: 700px;
height: 900px;
padding: 20px;
margin-top: 20px;
margin-left: 480px;
}
#mainbox1{
width: 675px;
height: 100px;
background-color: #ffffff;
padding: 20px;
margin-top: -8px;
margin-left: -8px;
}
#iconone{
width: 130px;
height: 130px;
background-color: #D4A190;
margin-top: -15px;
margin-left: -15px;
}
#minidescription{
width: 450px;
height: 120px;
background-color: #D4A190;
margin-top: -130px;
margin-left: 120px;
padding: 5px;
text-align: center;
font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
font-size: 12px;
font-style: normal;
font-variant: normal;
line-height: 20px;
word-spacing: 2px;
}
#linkguide{
width: 105px;
height: 130px;
background-color: #C390D4;
margin-top: -130px;
margin-left: 585px;
}
#navigation {
width: 105px;
line-height: 14px;
}
#navigation a:link, #navigation a:visited, #navigation a:active {
display: block;
font: 7px "small fonts", "century gothic";
text-transform: uppercase;
text-decoration: none;
letter-spacing: 2px;
background-color: #111;
color: #fff;
padding: 7px 3px;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
-ms-transition: all .5s ease-out;
transition: all .5s ease-out;
}
#navigation a:hover {
background-color: #8CC21F;
color: #000;
padding: 7px 9px;
}
.question{
width: 705px;
height: 50px;
background-color: #A1D490;
margin-left: -8px;
margin-top: 10px;
padding: 5px;
}
.questionicon{
background-image: url("http://i66.tinypic.com/2u5qhe8.png");
width: 16px;
height: 16px;
position: absolute;
top: 200px;
left: 510px;
}
.answer{
background-color: #90C3D4;
width: 705px;
height: 50px;
margin-left: -8px;
margin-top: 10px;
padding: 5px;
}
.answericon{
background-image: url("http://i65.tinypic.com/qod4kx.png");
width: 16px;
height: 16px;
position: absolute;
top: 260px;
left: 510px;
}
p.center {
text-align: center;
font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
font-size: 12px;
font-style: normal;
font-variant: normal;
word-spacing: 2px;
}<head>
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
</head>
<body>
<div id="container">
<div id="mainbox1">
<div id="iconone"><IMG SRC="http://i67.tinypic.com/vhxls9.png" ALT="icon"></div>
<div id="minidescription">ellentesque non semper leo. Aliquam eu ultricies tellus. Ut rutrum fringilla rhoncus. Vestibulum bibendum quam at orci bibendum placerat. Etiam lectus nisl, ullamcorper ac aliquam vitae, efficitur eu mauris. Suspendisse porttitor euismod tempus. Quisque eleifend nulla vel auctor dictum. Ut posuere condimentum odio. Aliquam erat volutpat. Sed in laoreet odio. Mauris quis feugiat dolor.</div>
<div id="linkguide">
<div id="navigation">
<a href="http://google.com">Link 1</a><br>
<a href="http://yahoo.com">Link 2</a><br>
<a href="http://bing.com">Link 3</a><br>
<a href="http://bing.com">Link 4</a><br>
</div>
</div>
</div>
<!-- Question One -->
<div class="question"><div class="questionicon"></div>
<p class="center">This paragraph will be red and center-aligned.</p>
</div>
<div class="answer"><div class="answericon"</div></div>
<p class="center">This paragraph will be red and center-aligned.</p>
</div>
<!-- Question two -->
<div class="question"><div class="questionicon"></div>
<p class="center">This paragraph will be red and center-aligned.</p>
</div>
<div class="answer"><div class="answericon"</div></div>
<p class="center">This paragraph will be red and center-aligned.</p>
</div>
</div>
</body>您可以找到完整/原始 View here
最佳答案
我刚做了这个fiddle用你的代码。看一看。
这是我改变的:
.question {
width: 705px;
height: 50px;
background-color: #A1D490;
margin-top: 10px;
position: relative;
display: flex;
justify-content: center;
}
.questionicon {
background-image: url("http://i66.tinypic.com/2u5qhe8.png");
width: 16px;
height: 16px;
position: absolute;
left: 32px;
top: 16px;
}
.answer {
background-color: #90C3D4;
width: 705px;
height: 50px;
margin-top: 10px;
position: relative;
display: flex;
justify-content: center;
}
.answericon {
background-image: url("http://i65.tinypic.com/qod4kx.png");
width: 16px;
height: 16px;
position: absolute;
left: 32px;
top: 16px;
}
我使用 position: relative 和 display: flex 修复了布局。
当您在元素上设置 position: relative 时，其所有具有 position: absolute 的子元素都将相对于它定位。
有关 display: flex 如何工作的重要指南和示例，请查看 css-tricks: guide to flex box .它对于垂直和/或水平居中元素非常有用。
关于javascript - DIV 类错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39628076/