0

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

Варианты компоновки див-блоков

<!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>

1 ответ 1

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.