ミドルボックスは同じ位置になく、サイズが異なります

私はCSSの初心者ですので、笑わないでください！ :)私はほとんど永遠に試しましたが、それは助けになりませんでした。私の中央のボックスは、他のものと同じサイズである必要があり、同じ位置にする必要があります This is the problemあなたの意見を与えて、私は実際には時間がありませんクイッとしてください...ありがと！私のテキストが短すぎてアップロードできませんより多くのテキストを追加します。そして申し訳ありませんが、私は本当に良い英語を話せません。もう1つ... Javascriptでボタンをクリックすると、これらのボックスをゆっくりと表示するにはどうすればいいですか？私はそれがJQueryになることを望んでいない！あなたの質問の後半部分についてはミドルボックスは同じ位置になく、サイズが異なります

*{ 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
#left { 
 
\t float:left; 
 
\t display: block; 
 
    display: inline-block; 
 
    width: 300px; 
 
    border: 3px solid #0080ff; 
 
    padding: 20px; 
 
    margin: 56px; 
 
\t vertical-align:-200%; 
 
\t font-family:arial; 
 
\t border-radius:25px; 
 
\t color:white; 
 
\t text-shadow: 2px 1px #0080ff; 
 
\t font-style: oblique; 
 
\t letter-spacing:1px; 
 
\t font-size:18; 
 
\t background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url('http://img.wallpaper.sc/desktop/images/5k/desktop-pc-5120x2880-wallpaper_00019.jpg'); 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 

 
#middle { 
 
\t -moz-box-align: center; 
 
\t top: 50%; 
 
\t position: relative; 
 
\t margin-top: -50px; 
 
\t display:block; 
 
    display: inline-block; 
 
    width: 300px; 
 
    border: 3px solid #0080ff; 
 
    padding: 30px; 
 
    margin: 30px 0px; 
 
\t font-family:arial; 
 
\t border-radius:25px; 
 
\t color:#ffffff; 
 
\t text-shadow: 2px 1px #0080ff; 
 
\t font-style: oblique; 
 
\t letter-spacing:1px; 
 
\t font-size:18; 
 
\t background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url('http://img.wallpaper.sc/desktop/images/5k/desktop-pc-5120x2880-wallpaper_00019.jpg'); 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 
\t 
 
#right { 
 
\t float:right; 
 
\t display: block; 
 
    display: inline-block; 
 
    width: 300px; 
 
    border: 3px solid #0080ff; 
 
    padding: 20px; 
 
    margin: 56px 54px; 
 
\t vertical-align:-200%; 
 
\t font-family:arial; 
 
\t border-radius:25px; 
 
\t color:#ffffff; 
 
\t text-shadow: 2px 1px #0080ff; 
 
\t font-style: oblique; 
 
\t letter-spacing:1px; 
 
\t font-size:18; 
 
\t background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url('http://img.wallpaper.sc/desktop/images/5k/desktop-pc-5120x2880-wallpaper_00019.jpg'); 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 

 
#left, #middle, #right{ 
 
\t height: 130px 
 
}

<!DOCTYPE> 
 
<html> 
 
<head> 
 
<title>Moj web</title> 
 
<script type="text/javascript" src="java2.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<script src="js/scripts.js"></script> 
 
</head> 
 
<link rel="stylesheet" href="style.css"> 
 
<body background="http://img.wallpaper.sc/desktop/images/5k/desktop-pc-5120x2880-wallpaper_00019.jpg"> 
 
<ul> 
 
<li><a class="active" href="index.html">Home</a></li> 
 
<li><a href="news.html">News</a></li> 
 
<li><a href="contact.html">Contact</a></li> 
 
<li><a href="about.html">About</a></li> 
 
</ul> 
 
<br> 
 
<br> 
 
<script> 
 
function showDiv() { 
 
    var x = document.getElementById("welcomeDiv"); 
 
    if (x.style.display === "none") { 
 
     x.style.display = "block"; 
 
    } else { 
 
     x.style.display = "none"; 
 
    } 
 
} 
 
</script> 
 
<script> 
 
function showDiver() { 
 
    var x = document.getElementById("welcomeDiver"); 
 
    if (x.style.display === "none") { 
 
     x.style.display = "block"; 
 
    } else { 
 
     x.style.display = "none"; 
 
    } 
 
} 
 
</script> 
 
<script> 
 
function showDiverer() { 
 
    var x = document.getElementById("welcomeDiverer"); 
 
    if (x.style.display === "none") { 
 
     x.style.display = "block"; 
 
    } else { 
 
     x.style.display = "none"; 
 
    } 
 
} 
 
</script> 
 

 
<center><div> 
 
<button onclick="showDiv()" style= "margin-right: 75px">Pritisni me!</button> 
 
<button onclick="showDiverer()" style= "margin-right: 75px">Pritisni me!</button> 
 
<button onclick="showDiver()" style= "margin-right: 75px">Pritisni me!</button> 
 
</div></center> 
 
<br> 
 
<br> 
 
<div id="welcomeDiv" style="display:none;"> 
 
<div id="left"> 
 
<p>Zdravo, ja sam Kenan!<br> 
 
Ovo je moja testna stranica na kojoj radim dosta kratko!<br> 
 
Na ovoj stranici mozete viditi HTML, CSS i JS jezike!<br> 
 
</p> 
 
</div> 
 
</div> 
 
<div id="welcomeDiver" style="display:none;"> 
 
<div id="right"> 
 
<p>Zdravo, ja sam Kenan!<br> 
 
Ovo je moja testna stranica na kojoj radim dosta kratko!<br> 
 
Na ovoj stranici mozete viditi HTML, CSS i JS jezike!<br> 
 
</p> 
 
</div> 
 
</div> 
 
<div id="welcomeDiverer" style="display:none;"> 
 
<div id="middle"> 
 
<p>Zdravo, ja sam Kenan!<br> 
 
Ovo je moja testna stranica na kojoj radim dosta kratko!<br> 
 
Na ovoj stranici mozete viditi HTML, CSS i JS jezike!<br> 
 
</p> 
 
</div> 
 
</div> 
 
<br> 
 
</body> 
 
</html>

出典

2017-10-26 The Coding Kenan

あなたのHTMLコードも必要です。フェードインについては、何を試しましたか？ – jaunt

、これを試してみてください。

.animate { 
     -webkit-animation-name: example; 
     -webkit-animation-duration: 4s; 
} 

@keyframes example { 
    from {visibility: hidden;} 
    to {visibility: visibile;} 
}

Javascriptを：

var leftBtn = document.getElementById("Insert Button Id Here"); 
var leftBox = document.getElementById("left"); 
leftBtn.onclick = startLeftAnimation; 

function startLeftAnimation() { 
    leftBox.classList.add("animate"); 
}

CSSアニメーションは、この場合には非常にクリーンでなければなりません。複雑なコードはなく、デバッグするのがずっと簡単です。

出典

2017-10-26 19:39:34 Teju

ミドルボックスは同じ位置になく、サイズが異なります

答えて

関連する問題