0
CSS 및 HTML 기본을 익히고 문제가 발생했습니다. 내 옆의 flexbox (aside1)에 내 측면 navbar (내용)가 없습니다. navbar가 메인 플렉스 박스 (메인)를 덮고 있습니다. 나는 웹을 넘겼지만 작동 할 해결책을 찾지 못했습니다.플렉스 박스 및 고정 사이드 탐색 막대
또한 내 세 번째 플렉스 박스 (aside-2)는 자동 높이를 사용하지만 예를 들어 4em 높이로 지정하고 싶습니다. 내가 지정하면, 작동하지만, 메인 플렉스 박스는 위로 움직이지 않지만, 그의 이전 위치로 붙어 있습니다.
바이올린 : 도움을
감사합니다.
HTML :
<head>
<title>Munchies</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style3.css">
</head>
<body>
<nav>
<ul class="navigation">
<li class="nav-item"><a href="index.html">Home</a></li>
<li class="nav-item"><a href="world.html">Around the globe</a></li>
<li class="nav-item"><a href="where.html">Where to eat?</a></li>
<li class="nav-item"><a href="recipes.html">Recipes</a></li>
<li class="nav-item"><a href="about.html">About me</a></li>
</ul>
</nav>
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger"></label>
<div class="wrapper">
<article class="main">
<h1>Food around the world</h1>
<h2 id="japan" class="anchor">Japan</h2>
<h3>Ramen</h3>
<p>
Ramen, egg noodles in a salty broth, is Japan's favourite late night meal. It's also the perfect example of an imported dish - in this case from China - that the Japanese have made completely and deliciously their own. There are four major
soup styles: tonkotsu (pork bone), miso, soy sauce and salt. Fukuoka is particularly famous for its rich tonkotsu ramen; pungent miso ramen is a specialty of Hokkaido.
</p>
<img src="https://gourmetadventuresnet.files.wordpress.com/2014/02/chashu-shoyu-ramen-gourmet-adventures.jpg" alt="ramen" class="responsive-image" />
<h3>Sushi</h3>
<p>
Put simply, sushi is raw fish served on rice seasoned lightly with vinegar. It's in the variety of flavours and textures - like tangy, creamy uni (sea urchin meat) and plump, juicy, ama-ebi (sweet shrimp) - that things get interesting. Despite sushi's
lofty image, it has a humble origin: street food.
</p>
<h3>Tempura</h3>
<p>
Light and fluffy tempura is Japan's contribution to the world of deep-fried foods (though it likely originated with Portuguese traders). The batter-coated seafood and vegetables are traditionally fried in sesame oil and served with either a tiny pool
of salt or a dish of soy sauce-flavoured broth spiked with grated radish for dipping. Do not miss out on ebi-ten (tempura prawns).
</p>
<h3>Okonomiyaki</h3>
<p>
Literally "grilled as you like," okonomiyaki is Japanese comfort food at its best, and a clear violation of the typical refined image of Japanese food. It's a savoury pancake filled with any number of things (but usually cabbage and pork) and topped with
fish flakes, dried seaweed, mayonnaise and a Worcester-style sauce. It's also a lot of fun: At most restaurants, diners grill the dish themselves at a hotplate built into the table.
</p>
</article>
<article class="main">
<h2 id="mexico">Mexico</h2>
<h3>Mole</h3>
<p>Three states claim to be the original home of mole (pronounced "mol-eh"), a rich sauce popular in Mexican cooking.
There are myriad types of mole but all contain around 20 or so ingredients, including one or more varieties of chilli peppers, and all require constant stirring over a long period of time.
Perhaps the best-known mole is mole poblano, a rusty red sauce typically served over turkey or chicken.
</p>
</article>
<aside class="aside aside-1">
<ul class="content">Table of content
<li><a href="#japan">Japan</a></li>
<li><a href="#mexico">Mexico</a></li>
<li><a href="">eeeeee</a></li>
<li><a href="">eeeeee</a></li>
<li><a href="">eeeeee</a></li>
<li><a href="">eeeeee</a></li>
</ul>
</aside>
<aside class="aside aside-2">
MUNCHIES
</aside>
</div>
</body>
</html>
CSS : 다시
/*CSS reset*/
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;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/*Navigation menu*/
.navigation {
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
list-style: none;
background: rgb(35, 36, 35);
}
/*List items width in navigation menu*/
.nav-item {
width: 200px;
border-top: 1px solid rgb(237, 237, 237);
border-bottom: 1px solid rgb(237, 237, 237);
}
/*Appearance for navigation menu links*/
.nav-item a {
display: block;
padding: 1em;
background: rgb(35, 36, 35);
color: white;
font-size: 1.2em;
text-decoration: none;
transition: background 0.5s;
}
/*Changing the color of the link when hovering over with the cursor*/
.nav-item a:hover {
background: black;
}
/* Site wrapper, using flexbox*/
.wrapper {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
text-align: center;
}
.wrapper {
flex: 1 100%;
min-height: 100%;
min-width: 100%;
background-color: rgb(237, 237, 237);
position: relative;
top: 0;
bottom: 100%;
left: 0;
z-index: 1;
padding: 0em;
background-size: 200%;
}
.main {
padding: 1em;
flex: 1 100%;
text-align: justify;
background: rgb(237, 237, 237);
order: 3;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 18px;
line-height: 1.3;
}
.aside-1 {
padding-top: 1em;
padding-left: 5em;
padding-right: 5em;
padding-bottom: 1em;
margin-top: 0em;
flex: 1 100%;
background: rgb(224, 224, 224);
order: 2;
}
.aside-2 {
padding: 10px;
margin-top: 0em;
flex: 1 100%;
background: rgb(55, 60, 57);
order: 1;
font-size: 40px;
color: white;
}
.responsive-image {
max-width: 100%;
}
/*Navigation trigger*/
.nav-trigger {
/*hide the checkbox input*/
position: absolute;
clip: rect(0, 0, 0, 0);
}
label[for="nav-trigger"] {
/*critical positioning styles */
position: fixed;
left: 15px;
top: 15px;
z-index: 2;
/*styles */
height: 30px;
width: 30px;
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30 30' xml:space='preserve'><rect width='30' height='6'/><rect y='24' width='30' height='6'/><rect y='12' width='30' height='6'/></svg>");
background-size: contain;
}
.nav-trigger+label, .wrapper {
transition: left 0.3s;
}
.nav-trigger:checked+label {
left: 215px;
}
.nav-trigger:checked~.wrapper {
left: 200px;
}
html, body {
height: 100%;
}
body {
/*Without this, the body has excess horizontal scroll when the menu is open*/
overflow-x: hidden;
margin-left: 0px;
margin-right: 0px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
}
h1, h2, h3, p {
margin-left: 1em;
margin-right: 1em;
}
h1, h2, h3 {
font-weight: bold;
padding-top: 10px;
padding-bottom: 10px;
}
.recipe {
margin-left: 1em;
margin-right: 1em;
margin-bottom: 1em;
}
/*Styles for table of content*/
.content {
list-style-type: none;
text-align: center;
font-size: 18px;
max-width: 15em;
margin: auto;
}
.content li a {
display: block;
padding: 0.7em;
background: rgb(35, 36, 35);
/*SPREMENI BARVO TEKSTA, ISTO KOT OZADJE*/
color: white;
font-size: 1em;
text-decoration: none;
transition: background 0.5s;
/*SPREMENI BARVO BORDERJA, ISTO KOT OZADJE*/
border-top: 1px solid white;
border-bottom: 1px solid white;
}
.profile-pic {
border-radius: 50%;
max-width: 30%;
max-height: 30%;
float: left;
margin: 1em 1em 1em 1em;
}
#social img {
display: inline-block;
height: 35px;
width: 35px;
margin: 1em 1em 1em 1em;
float: left;
}
.anchor:before {
content: "";
display: block;
height: 50px;
/* fixed header height*/
margin: -50px 0 0;
/* negative fixed header height */
}
.index {
max-width: 40%;
border-radius: 25px;
margin: auto;
display: block;
}
/*Tablets responsive*/
@media all and (min-width: 700px) {
.main {
padding: 10px;
flex: 1 100%;
}
h1, h2, h3, p {
margin-left: 5em;
margin-right: 5em;
}
.recipe {
margin-left: 5em;
margin-right: 5em;
}
.aside-1 {
padding: 10px;
flex: 1 100%;
font-size: 18px;
/*position: fixed;*/
height: 100%;
}
.aside-2 {
background: red;
margin-top: 1em;
}
/* Navigation Menu - Background */
.navigation {
/* critical sizing and position styles */
height: 6em;
z-index: 2;
overflow: hidden;
/* non-critical appearance styles */
background: rgb(55, 60, 57);
}
/* Navigation Menu - List items */
.nav-item {
/* non-critical appearance styles */
width: 20%;
height: 6em;
border-top: none;
border-bottom: none;
float: left;
}
.nav-item a {
/* non-critical appearance styles */
width: auto;
height: 6em;
background: rgb(55, 60, 57);
font-size: 1em;
transition: color 0.2s, background 0.5s;
text-align: center;
padding-top: 2.3em;
border-left: 1px solid rgb(237, 237, 237);
border-right: 1px solid rgb(237, 237, 237);
}
/* Nav Trigger */
.nav-trigger {
display: none;
}
label[for="nav-trigger"] {
/* critical positioning styles */
display: none;
}
.nav-trigger+label, .wrapper {
transition: none;
}
.nav-trigger:checked+label {
left: 0;
}
.nav-trigger:checked~.wrapper {
left: 0px;
}
body {
margin-top: 3em;
}
.responsive-image {
margin: auto;
padding: 20px;
display: block;
width: 40%;
}
/*Styles for table of content*/
.content {
list-style-type: none;
text-align: center;
font-size: 18px;
}
.content li a {
display: block;
padding: 0.7em;
background: rgb(55, 60, 57);
/*SPREMENI BARVO TEKSTA, ISTO KOT OZADJE*/
color: white;
font-size: 1em;
text-decoration: none;
transition: background 0.5s;
/*SPREMENI BARVO BORDERJA, ISTO KOT OZADJE*/
border-top: 1px solid rgb(237, 237, 237);
border-bottom: 1px solid rgb(237, 237, 237);
}
}
/*Desktop responsive*/
@media all and (min-width: 900px) {
.main {
padding: 10px;
flex: 1 80%;
}
h1, h2, h3, p {
margin-left: 5em;
margin-right: 5em;
}
.aside-1 {
padding: 10px;
font-size: 18px;
flex: 1 0 20%;
height: 100%;
}
.aside-2 {
background: red;
margin-top: 0;
}
/* Navigation Menu - Background */
.navigation {
/* critical sizing and position styles */
height: 3em;
z-index: 2;
overflow: hidden;
/* non-critical appearance styles */
background: rgb(55, 60, 57);
}
/* Navigation Menu - List items */
.nav-item {
/* non-critical appearance styles */
width: auto;
height: 3em;
border-top: none;
border-bottom: none;
float: left;
}
.nav-item a {
/* non-critical appearance styles */
width: auto;
height: 3em;
background: rgb(55, 60, 57);
font-size: 1em;
transition: color 0.2s, background 0.5s;
padding: 1em;
}
/* Nav Trigger */
.nav-trigger {
display: none;
}
label[for="nav-trigger"] {
/* critical positioning styles */
display: none;
}
.nav-trigger+label, .wrapper {
transition: none;
}
.nav-trigger:checked+label {
left: 0;
}
.nav-trigger:checked~.wrapper {
left: 0px;
}
body {
margin-top: 3em;
}
.responsive-image {
margin: auto;
padding: 20px;
display: block;
width: 40%;
}
/*Styles for table of content*/
.content {
list-style-type: none;
text-align: center;
font-size: 18px;
max-width: 10em;
margin-top: 6em;
position: fixed;
left: 4em;
}
.content li a {
display: block;
padding: 0.7em;
background: rgb(55, 60, 57);
/*SPREMENI BARVO TEKSTA, ISTO KOT OZADJE*/
color: white;
font-size: 1em;
text-decoration: none;
transition: background 0.5s;
/*SPREMENI BARVO BORDERJA, ISTO KOT OZADJE*/
border-top: 1px solid rgb(237, 237, 237);
border-bottom: 1px solid rgb(237, 237, 237);
}
.profile-pic {
border-radius: 50%;
max-width: 30%;
max-height: 30%;
float: left;
margin: 1em 1em 1em 5em;
}
.index {
max-width: 40%;
}
}
감사합니다!
문제를 재현하는 피들을 만들 수 있습니까? –
https://jsfiddle.net/zuzfvufz/#&togetherjs=JOHFvsOaCU 잘하면 피들을 사용하여 처음으로 작동합니다. 이 문제는 데스크톱 버전에서 발생합니다. –