Как организовать div, чтобы быть более мобильным без использования начальной загрузки? - PullRequest
Новая
       30

Как организовать div, чтобы быть более мобильным без использования начальной загрузки?

0 голосов
/ 07 февраля 2019

Я пытаюсь выучить CSS и flex-box / grid.Я хочу переставить div так, чтобы положение div менялось при изменении размера экрана.Я пробовал абсолютное, относительное и гибкое положение, но не могу заставить его работать так, как задумано.Идея состоит в том, чтобы получить что-то вроде this .

Вот кодовый код кода, который я до сих пор:

Codepen 

<!DOCTYPE html>
<html>
<head>
<title>Data</title>
<meta charset="utf-8"/>
<link href="css/style.css" rel="stylesheet"/>
</head>
<body>
  <nav class="outer-col-1">
  <ul>
  <li><a href="#">Menu1</a></li>
  <li><a href="#">Menu2</a></li>
  <li><a href="#">Menu3</a></li>
  <li><a href="#">Menu4</a></li>
  </ul>
  </nav>
  <div class="outer-col-2">
  	<header><h1>TITLE</h1></header>
    <div class="inner-row">
      <div class="inner-col">
    	<article>
			<h2>ARTICLE TITLE</h2>
			 <picture>
			
			<source srcset="images/binare-270.png" media="(max-width: 440px)">
			<source srcset="images/binare-400.png">
			<img src="images/binare-400.png" alt="image desc">
		</picture> 
			<p>LOREM IMPSUM</p>
      <p>LOREM IMPSUM</p>
      <p>LOREM IMPSUM</p>
        
      </article>
        
  		<footer>FOOTERFOOTERFOOTER</footer>
      </div>
    	<aside>
      <p>LOREM IMPSUMLOREM IMPSUMLOREM IMPSUMLOREM IMPSUMLOREM IMPSUMLOREM IMPSUMLOREM IMPSUMLOREM IMPSUMLOREM IMPSUMLOREM IMPSUMLOREM IMPSUMLOREM IMPSUMLOREM IMPSUMLOREM IMPSUMLOREM IMPSUMLOREM IMPSUMLOREM IMPSUMLOREM IMPSUMLOREM IMPSUMLOREM IMPSUMLOREM IMPSUMLOREM IMPSUMLOREM </p>
</aside>
    </div>
  </div>
</body>
</html>

1 Ответ

0 голосов
/ 07 февраля 2019

Здесь я добавил макет flexbox без использования начальной загрузки в соответствии с образцом изображения.А также вы можете настроить тело max-width на основе ваших требований.Я надеюсь, что это подойдет для вас. 

html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

*,
:after,
:before {
    box-sizing: border-box;
}

body {
    padding: .5rem;
    min-height: 100%;
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    flex-flow: column;
}

a {
    color: white;
}

nav,
aside {
    flex: 0 0 10rem;
}

header,
nav,
aside,
main,
footer {
    color: white;
    background: #2b97f3;
    padding: .5rem;
}

header,
nav,
footer,
aside,
main {
    margin: 5px;
}

.wrapper {
    display: flex;
    flex-flow: row;
}

nav {
    order: 1;
}

.wrapper-inner {
    order: 2;
}

footer {
    margin-top: 10px;
}

.main-inner {
    display: flex;
}

@media screen and (max-width: 767px) {
    nav {
        margin-bottom: 10px;
    }
    .main-inner {
        display: flex;
        flex-flow: column;
    }
    .main-inner .content {
        order: 2;
    }
    .main-inner .aside {
        order: 1;
    }
    .wrapper {
        display: block;
    }
}
<div class="wrapper">
	<nav>
		<h3>Navigation</h3>
		<ul>
		  <li><a href="#">Home</a></li>
		  <li><a href="#">About</a></li>
		  <li><a href="#">Services</a></li>
		  <li><a href="#">Contact</a></li>
		</ul>
	</nav>
	<div class="wrapper-inner">
		<header>
			<h3>Header</h3>
		</header>
		<div class="main-inner">			
				<div class="content">
					<main>
						<h3>Content Area</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quod cumque at, qui excepturi illo vel, deserunt alias incidunt distinctio adipisci. Quisquam ducimus fuga ipsam modi accusamus, eaque unde porro.</p>

						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo vitae hic provident incidunt, illum voluptatibus voluptates voluptate esse ea, vero, beatae necessitatibus maxime minus ex doloribus dolorem eum quisquam optio.</p>

						<h4>More Content</h4>
						<p>Lorem ipsum dolor sit amet, consecte reprehenderit, quod necessitatibus hic vel dicta pariatur illum! Omnis!</p>
					</main>
					<footer>
						<h3>Footer</h3>
					</footer>
				</div>	
			<aside>
				<h3>Sidebar</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam necessitatibus velit voluptatem architecto eum magni quasi totam adipisci, suscipit, iure laboriosam deleniti modi sit excepturi accusamus minus debitis rem. Delectus.</p>
			</aside>
		</div>
	</div>	
</div>
...