-1
저는 자바 스크립트에 너무 익숙하지 않아 저에게 적합한 솔루션을 찾을 수 없습니다. 이 두 요소/div를 정렬하려고합니다. 즉, 이미지와 "모든 것"div가 동일한 높이를 가지므로 내 바닥 글이 맞습니다. 해결 방법 중 아무 것도 작동하지 않는 것 같습니다. 텍스트 나 그 밖의 내용에 많은주의를 기울일 필요가 없습니다. 내가 필요한 것은 이미지의 높이를 "모든 것"div와 똑같이 유지하는 방법에 대한 해결책입니다. 그렇게 할 때, "모든 것"div가 정체되지 않기를 바랄 것이므로 em 글꼴 값과 너비/높이 값의 백분율을 사용하여 브라우저 크기에 따라 바뀔 수 있습니다. 기본적으로 이미지 높이는 "everything"div의 높이를 변경하지 않고 "everything"div 높이와 같아야합니다. 추가 된 코드가 없으면됩니다.동일한 높이를 갖도록 요소 정렬
html {
margin: 0 0;
}
.kewlimage {
z-index: 1;
float: left;
width: 50%;
height: 45.4em;
}
.everything {
width: 50%;
float: left;
}
.navbar a {
float: left;
font-family: "Trebuchet MS";
font-size: 1.55em;
padding: 0.3475em 0.45em;
text-decoration: none;
color: lightslategrey;
text-align: center;
}
.navbar {
overflow: hidden;
background-color: transparent;
margin: auto 6%;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 1.55em;
border: none;
outline: none;
background-color: transparent;
color: lightslategrey;
padding: 0.3475em 0.45em;
text-align: center;
}
.dropdown-content {
z-index: 1;
position: absolute;
background-color: darkslategrey;
display: none;
margin: 0 0.7em;
}
.dropdown-content a {
display: block;
text-align: left;
float: none;
}
.dropdown:hover .dropdown-content {
display: block;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
text-decoration: underline;
}
.dropdown-content a:hover {
text-decoration: underline;
}
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
body {
background-color: lightskyblue;
}
.everything {
background-image: url("https://wallpaper.wiki/wp-content/uploads/2017/04/wallpaper.wiki-Backgrounds-Flat-Design-HD-PIC-WPB004634.jpg");
width: 50%;
z-index: 1;
}
h1.title {
text-align: center;
color: ghostwhite;
font-family: "comic sans ms";
font-size: 3.25em;
margin: 4% 0% 5% 5%;
}
.title {}
h2.subtitle {
color: white;
font-family: tahoma;
font-size: 2em;
opacity: 1;
margin: 2.5% auto;
}
.database-explanation {
padding: 0.625em 0.9375em;
background-color: rgba(95, 158, 160, 0.3);
width: 87.5%;
text-align: center;
margin: 9% auto;
}
.text {
color: white;
font-family: verdana;
text-align: left;
font-size: 1.1em;
opacity: 1;
margin: 3.5% auto;
}
.stand-for {
padding: 0.625em 0.9375em;
background-color: rgba(95, 158, 160, 0.3);
width: 87.5%;
text-align: center;
margin: 8% auto;
}
.footertop {
background-color: #333;
width: 100%;
float: left;
}
#divider {
text-align: center;
margin: 4% auto;
width: 90%;
border: 0.1em solid rgba(28, 28, 28, 0.6);
}<div>
<img class="kewlimage" src="https://alorica.files.wordpress.com/2014/10/jason-nguyen-treelr.jpg">
</div>
<div class="everything">
<div class="navbar">
<a href="home.html">Home</a>
<a href="news.html">News</a>
<a href="join-the-team.html">Join the Team</a>
<a href="archives.html">Archives</a>
<div class="dropdown">
<button class="dropbtn" id="dropbtn">InterTutor</button>
<div class="dropdown-content">
<a href="coding.html">Coding</a>
<a href="science.html">Science</a>
<a href="math.html">Math</a>
<a href="history.html">History</a>
<a href="about.html">About</a>
</div>
</div>
</div>
<div class="introduction">
<h1 class="title">Welcome to Databases</h1>
<div class="database-explanation">
<h2 class="subtitle" id="sub1">What is Databases?</h2>
<p class="text" id="text1">Databases is a website meant for students and adults likewise. Our goal is to have a community of students and adults who can help each other while also learning about what ever they choose though the InterTutor program. We also hope to have a sort
of archives available for easy to access information. We hope that you use these reponsibly, as we will not be responsible for any innapropriate use of these sources. </p>
</div>
<div class="stand-for">
<h2 class="subtitle">What We Stand For</h2>
<p class="text">In Databases, we want students to learn, and our name stands as a representation of this. D for diligence, A for ambitious, T for technological, A for approachable, B for benevolent, A for attentive, S for studious, E for efficent, and S for scintillating.
We hope that all of the people that visit this website stand by the same standards. </p>
</div>
</div>
</div>
<div class="footer">
<div class="footertop">
<hr id="divider">
</div>
</div>
포스트 코드 문제 제발 – Isaac
관심이있을 수 있습니다 http://brm.io/jquery-match-height/ – Isaac
코드는 서식 오류를 보여주는 계속, 그것을 실행할 때 여전히 작동합니다. 따라서 서식을 지정하여 질문을 게시 할 수 없습니다. –