スライダーcss3を追加すると、親ボックスがインラインで移動したので

ここではうんざりです。私は上部にあるポートフォリオボックスにスライダのトランジションを追加しましたが、それを追加してから、2つの大きなテキストボックスは、あらかじめページの左側に座っていたときに垂直に移動しました。どこが間違っているのかわからない！スライダーcss3を追加すると、親ボックスがインラインで移動したので

これはいつものように、確かに小さなものになるだろうが、これは、iveが何歳に過ぎないかを知るために過ごしたその日の小さなハードルの1つです。ありがとうございました！

<!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>

出典

2016-04-15 wezyourboat

これが最も可能性が高い "clearfix" の状況ですが、それを達成するための様々なソリューションがあります。ポートフォリオAFTER

What is a clearfix?

新しいCSS

.clearfix:after { 
    content: " "; /* Older browser do not support empty content */ 
    visibility: hidden; 
    display: block; 
    height: 0; 
    clear: both; 
}

<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>

出典

2016-04-15 20:08:42 imvain2

空のdivを追加するには、今日のために私のコードの神です、あなたに優しい先生に感謝します。 – wezyourboat

問題はありません。何度も同じような問題が発生しましたので、単にフロートを探しました。 – imvain2

スライダーcss3を追加すると、親ボックスがインラインで移動したので

答えて

関連する問題