Выравнмвание flex-элементов

137

24 декабря 2019, 17:10

Подскажите новичку какими правилами расположить блоки так и с такими размерами, как на фото (возможен вариант в процентах).

<!DOCTYPE> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />

</head>
<body>
<div id="wrapper">
<div id="header">
</div><!-- #header-->
 <div id="middle">
<div class="left-container">LEFT</div>
<div class="center-container">CENTER
<table width="100%" >
  <tr>
    <td>1</td>
    <td>text text text text text text t</td>
    <td>text</td>
  </tr>
    <tr>
    <td>2</td>
    <td>text text text text text text tet</td>
    <td>text</td>
  </tr>
    <tr>
    <td>3</td>
    <td>text text text text text text tex</td>
    <td>text</td>
  </tr>
    <tr>
    <td>4</td>
    <td>text text text text text text tex</td>
    <td>text</td>
  </tr>
    <tr>
    <td>5</td>
    <td>text text text text text text t</td>
    <td>text</td>
  </tr>
    <tr>
    <td>6</td>
    <td>text text text text text text t</td>
    <td>text</td>
  </tr>
    <tr>
    <td>7</td>
    <td>text text text text text text text </td>
    <td>text</td>
  </tr>
    <tr>
    <td>8</td>
    <td>text text text text text text </td>
    <td>text</td>
  </tr>
    <tr>
    <td>9</td>
    <td>text text text text text text text</td>
    <td>text</td>
  </tr>
    <tr>
    <td>10</td>
    <td>text text text text text text text te</td>
    <td>text</td>
  </tr>
    <tr>
    <td>11</td>
    <td>text text text text text text text text text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>12</td>
    <td>text text text text text text text text text</td>
    <td>text</td>
  </tr>
 </table>
</div>
<div class="right-container">RIGHT</div>
 </div><!-- #middle-->
</div><!-- #wrapper -->
</body>
</html>

html, body { 
	margin: 0px; 
	padding: 0px; 
	font-size: 17px; 
	line-height: 1.4em; 
	font-family: Arial, Helvetica,Freeset,Futura, sans-serif; 
	width: 100%; 
	background-color: #000; 
	font-weight:900; 
} 
/*выравнивание первой колонки таблицы */ 
table tr td{ 
  text-align:center; 
  padding-right:5px 
} 
/*выравнивание второй колонки таблицы */ 
table tr td+td{ 
  text-align:left; 
} 
/*выравнивание третьей колонки таблицы */ 
table tr td+td+td{ 
  text-align:center; 
} 
table tr td{ 
    border:1px solid #3a3a3a; 
	z-index:1 
} 
table { 
    border-collapse: collapse; 
	 border-style: hidden; 
} 
#wrapper { 
	margin:auto; 
    max-width:980px; 
	padding:5px 5px 0 5px 
} 
#middle{ 
   display:flex; 
    
	 
} 
#header { 
	width: 100%; 
	 
} 
.left-container{ 
    background-color:red; 
    width:150px; 
	height:300px; 
	text-align:center 
} 
.center-container{ 
    background-color: blue; 
    width:55%; 
	margin-left:10px; 
    height:300px; 
	text-align:center 
} 
.right-container{ 
    background-color: yellow; 
    width:300px; 
	margin-left:10px; 
	height:300px; 
	text-align:center 
} 
 
@media (max-width: 700px) { 
#middle{ 
    display: flex; 
    flex-direction: column; 
	flex-wrap: wrap; 
	height:600px; 
}  
#middle.left-container{ order: left-container; } 
#middle.center-container { order: right-container;margin:10px 0 0 0; } 
#middle.right-container { order:center-container; } 
} 
}

<!DOCTYPE>  
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
 
 
</head> 
<body> 
<div id="wrapper"> 
<div id="header"> 
</div><!-- #header--> 
 <div id="middle"> 
<div class="left-container">LEFT</div> 
<div class="center-container">CENTER 
<table width="100%" > 
  <tr> 
    <td>1</td> 
    <td>text text text text text text t</td> 
    <td>text</td> 
  </tr> 
    <tr> 
    <td>2</td> 
    <td>text text text text text text tet</td> 
    <td>text</td> 
  </tr> 
    <tr> 
    <td>3</td> 
    <td>text text text text text text tex</td> 
    <td>text</td> 
  </tr> 
    <tr> 
    <td>4</td> 
    <td>text text text text text text tex</td> 
    <td>text</td> 
  </tr> 
    <tr> 
    <td>5</td> 
    <td>text text text text text text t</td> 
    <td>text</td> 
  </tr> 
    <tr> 
    <td>6</td> 
    <td>text text text text text text t</td> 
    <td>text</td> 
  </tr> 
    <tr> 
    <td>7</td> 
    <td>text text text text text text text </td> 
    <td>text</td> 
  </tr> 
    <tr> 
    <td>8</td> 
    <td>text text text text text text </td> 
    <td>text</td> 
  </tr> 
    <tr> 
    <td>9</td> 
    <td>text text text text text text text</td> 
    <td>text</td> 
  </tr> 
    <tr> 
    <td>10</td> 
    <td>text text text text text text text te</td> 
    <td>text</td> 
  </tr> 
    <tr> 
    <td>11</td> 
    <td>text text text text text text text text text</td> 
    <td>text</td> 
  </tr> 
  <tr> 
    <td>12</td> 
    <td>text text text text text text text text text</td> 
    <td>text</td> 
  </tr> 
 </table> 
</div> 
<div class="right-container">RIGHT</div> 
 </div><!-- #middle--> 
 
</div><!-- #wrapper --> 
 
</body> 
</html>

Answer 1

https://jsfiddle.net/e37d90qw/

body { margin: 0; } 
 
main { display: flex; flex-wrap: wrap; } 
div { height: 3em; } 
.l { flex: 1 1 150px; background: red; } 
.c { flex: 1 1 350px; background: blue; } 
.r { flex: 1 1 200px; background: yellow; } 
 
@media (max-width: 700px) { 
  .c { order: 1; } 
}

<main> 
  <div class=l></div> 
  <div class=c></div> 
  <div class=r></div> 
</main>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

Подробнее о сайте site-vizitka-kiev.org.ua

ТОП-10

Все популярные вопросы

Как скрыть элемент label с помощью js/jquery

Вот такой div

134

jQuery

timeout и смена ксс после отправки сообщения

В общем после отправки формы, хочу чтобы выскакивало модальное окно с текстом и через 5 секунд редирект на другую страницу, как это реализовать?...

121

jQuery

Валидация форм перед отправкой

Есть код, вообще не получается поставить валидацию, те

161

jQuery

Форматирование полученных данных в jquery

Есть у меня маска для поля input

127