1
일부 CSS에 문제가 있습니다. 화면 크기가 1024px보다 작아지면 스택하려는 3 개의 뉴스 열이 있습니다. 그러나 코드를 통해 지금은 사라졌습니다. 이상하게도 저는 스택해야하는 행이 2 개 있습니다. 하나는 .row이고 다른 하나는 작동하지 않는 .newsrow입니다.CSS 플렉스 박스가 겹쳐지지 않습니다.
CSS :
/*Neccasary for alignment for some reason, have to solve this issue later*/
* {
box-sizing: border-box;
}
/*Style van overall body*/
body {
margin: 0;
background-color: #000;
color: white;
}
/*Style voor h2 tekst*/
h2 {
}
/* Style the header */
.header {
background-color: #222222;
padding: 50px;
text-align: center;
}
/* Container for flexboxes */
.row {
display: -webkit-flex;
display: flex;
}
.contentrow {
display: -webkit-flex;
display: flex;
}
/* 3 middelse columns (Grootte wordt bepaald in html doc (Standaard: Flex-Grow: 4;)) */
.column {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 0px;
text-align: center;
}
.middlemenu {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 0px;
height: 50px;
text-align: center;
margin: 0px;
}
/* Container for newsboxes */
.newsrow {
display: -webkit-flex;
display: flex;
}
.newsbox {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
margin-top: 30px;
margin-left: 30px;
margin-right: 30px;
margin-bottom: 10px;
min-width: 200px;
height: 225px;
text-align: center;
background-color: #999999;
}
/* Style van de footer. */
.footer {
background-color: #222222;
padding: 10px;
text-align: center;
}
/* Zorgt ervoor dat bij het krimpen de flexboxes stapelen i.p.v. naast elkaar blijven staan.*/
@media (max-width: 1024px) {
.row {
-webkit-flex-direction: column;
flex-direction: column;
display: block;
}
.newsrow {
-webkit-flex-direction: column;
flex-direction: column;
display: flex;
}
}
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="header">
<h2>234234</h2>
</div>
<div class="row">
<div class="column" style="background-color:#444; padding: 10px;">1337 WHEH</div>
<div class="column" style="background-color:#555; flex-grow: 4;">
<div class="middlemenu" style="background-color:#777">
<!--Hier komt menu content-->
</div>
<div class="newsrow">
<div class="newsbox"></div>
<div class="newsbox"></div>
<div class="newsbox"></div>
</div>
</div>
<div class="column" style="background-color:#666; padding: 10px;">1337 WHEEEH</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>
문제 : 내가 옆에 서로의 상단 대신 측면에 .row 스택 내에서 화면 작은 모든 것을 할 때. 그러나 .newsrow의 모든 내용은 1023px 너비에 도달하면 사라집니다.
도와주세요.
'.column'에서 단순히'height'을 제거하십시오. – sol
그걸 시도해 보았습니다. 내 문제 중 다른 문제가 해결되었지만 스택 대신 여전히 사라질 것입니다. –
그것은 이상한 일입니다. 그들은 아래 답변에서 저를 위해 쌓아 둡니다. 간섭을 일으킬 수있는 추가 코드가 있습니까? – sol