这里有点莫名其妙。我已经在顶部的投资组合框中添加了一个 slider 过渡，但是自从添加它之后，当两个大文本框之前刚好位于页面的左侧时，它们已经垂直移动了。所以不确定哪里出了问题或出了什么问题!
我确定这会是一些小问题，一如既往，但这是今天我花了很长时间试图弄清楚但就是做不到的那些小障碍之一。所以希望你能帮忙，谢谢!!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="favicon.png"/>
<link href='https://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<style type="text/css">
html, body {
margin:0;
padding:0;
}
body {
background: -webkit-gradient(linear, 84% 100%, 100% 0%, from(#9179AB), to(#E39745), color-stop(.6,#B37D89))
}
div.home {
width: 250px;
height: 35px;
background-color: #212121;
float:left;
border-style: solid;
border-color: #191919;
border-width: 1.5px;
}
div.mentioncopy {
color: white;
text-align: center;
padding-top: 7px;
font-family: 'Lato', sans-serif;
font-size: 11px;
letter-spacing: 2px;
}
div.portfolio {
width: 125px;
height: 35px;
background-color: #212121;
float: left;
border-style: solid;
border-color: #191919;
border-width: 1.5px;
}
div.portfoliocopy {
color: white;
text-align: center;
padding-top: 7px;
font-family: 'Lato', sans-serif;
font-size: 11px;
letter-spacing: 1px;
}
div.about {
width: 125px;
height: 35px;
background-color: #212121;
float:left;
border-style: solid;
border-color: #191919;
border-width: 1.5px;
}
div.aboutcopy {
color: white;
text-align: center;
padding-top: 7px;
font-family: 'Lato', sans-serif;
font-size: 11px;
letter-spacing: 1px;
}
.sliding-middle-out {
padding-bottom: 3px;
text-align: center;
}
.sliding-middle-out:after {
content: '';
display: block;
margin: auto;
height: 3px;
width: 0px;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.sliding-middle-out:hover:after {
width: 50%;
background: white;
}
.sliding-middle-out {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.sliding-middle-out:hover {
opacity: 0.7;
}
a:link
{
color: white;
text-decoration: none;
}
a:visited
{
color: white;
text-decoration: none;
}
a:hover
{
color: white;
text-decoration: none;
}
a:active
{
color: white;
text-decoration: none;
}
div.header {
width: 506px;
height: auto;
background-color: #212121;
display: inline-block;
}
div.headercopy {
color: white;
font-size: 40px;
padding-top: 20px;
padding-left: 30px;
padding-bottom: 20px;
padding-right: 20px;
}
div.headerlink {
width: 506px;
height: auto;
background-color: #212121;
}
div.linkcopy {
color: white;
font-size: 40px;
padding-top: 20px;
padding-left: 30px;
padding-bottom: 20px;
padding-right: 20px;
display: inline-block;
}
</style>
<title>3.0</title>
</head>
<body>
<div class="home">
<div class="mentioncopy">
MENTIONBENJAMIN
</div>
</div>
<div class="portfolio">
<div class="sliding-middle-out">
<div class="portfoliocopy">
<a href="portfolio.html"> PORTFOLIO </a>
</div>
</div
</div>
<div class="about">
<div class="aboutcopy">
ABOUT
</div>
</div>
<br><br><br><br><br>
<div class="header">
<div class="headercopy">
It’s like hosting your first dinner party with every design— to set the mood, nourish the guests and lay the table just so, requires dexterity, innovation and passion.
</div>
</div>
<br><br>
<div class="headerlink">
<div class="linkcopy">
Working between strategy and design, I find nothing more satisfying than cracking a clients puzzle of a problem in an inventive, effective way.
</div>
</div>
<br><br><br><br><br><br>
</body>
</html>
最佳答案
这很可能是“clearfix”情况，有多种解决方案可以实现。
新 CSS
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
AFTER portfolio 添加一个空 div
<div class="portfolio">
<div class="sliding-middle-out">
<div class="portfoliocopy">
<a href="portfolio.html"> PORTFOLIO </a>
</div>
</div> <!---- this needs the greater than sign also! --->
</div>
<div class="clearfix"></div>
关于html - 由于添加 slider css3 父框已与其内联移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36655759/