Позиционирование блоков div

130
08 февраля 2021, 14:30

Есть таблица из блоков . Строки добавляются как надо, но при попытке добавить ещё один блок, нижняя строка не смещается, а находит на блок.

$(document).ready(function () { 
    $('div.table_row.workplace_row').hover( 
        function () { 
            $(this).find('div.workplace_td.pointer').fadeIn(200) 
        }, 
        function () { 
            $(this).find('div.workplace_td.pointer').fadeOut(200) 
        }).click( 
        function () { 
            $(this).find('div.item_body').fadeToggle(200); 
			$(this).css({'border-radius' : '5px 5px 0 0'}); 
        } 
    ) 
});
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700'); 
 
body, html {  
    width: 100%; 
    height: 100%; 
} 
 
body { 
	margin: 0; 
	background: #000; 
} 
 
h1, h2, h3, h4, label, input { 
	font-family:  Roboto, sans-serif; 
} 
 
h2 { 
	color: #435063; 
	font-size: 22px; 
	margin: 20px 0 0 30px; 
} 
 
h3 { 
	color: #b5babc; 
	font-size: 12px; 
	font-weight: normal; 
	margin: 5px 0 0 30px; 
} 
 
p { 
	font-family:  Roboto, sans-serif; 
} 
 
a { 
	font-family: Roboto, sans-serif; 
	text-decoration: none; 
} 
 
.site_header { 
	position: absolute; 
	width:100% - 300px;  
    background: #29313C; 
	height: 66px; 
	z-index: 2; 
	left: 150px; 
	right: 150px; 
	top: 0%; 
	bottom: 0%; 
	box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3); 
} 
 
.site_logo_icon{ 
	position: absolute; 
	margin: 15px 0 0 27px; 
} 
 
.site_logo_name{ 
	position: absolute; 
	margin: 17px 0 0 63px; 
} 
 
.site_logo_name p{ 
	color: #f2f2f2; 
	font-size: 30px; 
	font-weight: bold; 
	margin: 0 0 0 0; 
} 
 
.side_menu { 
	position: absolute; 
	height: 100% - 66px; 
    background: #323A45; 
	width: 80px; 
	z-index: 1; 
	top: 66px; 
	left: 150px; 
	right: 0%; 
	bottom: 0%; 
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); 
} 
 
.side_button{ 
	float: left; 
	width: 50px; 
	height: 40px; 
	background: #282E37; 
	border-radius: 4px; 
} 
 
.side_button.first { 
	margin: 30px 0 0 13px; 
} 
 
.side_button.second{ 
	margin: 5px 0 0 13px;  
} 
  
.side_button a{ 
	display: block; 
	height: 40px; 
	width: 50px; 
} 
 
.side_button img{ 
	margin: -18px 0 0 -29px; 
	 
} 
  
.side_button_image { 
	position: absolute; 
	margin: 13px 0 0 16px; 
} 
 
.svg_ { 
	margin: 6px 0 0 6px; 
} 
 
.svg_client { 
	margin: 6px 0 0 8px; 
} 
 
.svg_error { 
	margin: 13px 0 0 12px; 
} 
 
.svg_side_button { 
	margin: 13px 0 0 16px; 
} 
 
.svg_side_find { 
	margin: 8px 0 0 12px; 
} 
 
.svg_side_money { 
	margin: 7.5px 0 0 12.5px; 
} 
 
.svg_side_report { 
	margin: 7px 0 0 12.5px; 
} 
 
.main_workplace { 
	position: absolute; 
	background: #f2f2f2; 
	height: 100% - 66px; 
	width: 100% - 230px; 
	top: 66px; 
	left: 230px; 
	right: 150px; 
	bottom: 0%; 
	overflow: auto; 
} 
 
.workplace_title{ 
	width: 400px; 
	height: 42px; 
	margin: 25px 0 0 10px; 
 
} 
 
.table_row { 
	width: 1400px; 
	background: #ffffff; 
	border-radius: 5px; 
	margin: 2px 30px 0; 
	box-shadow: 0 0 9px -4px rgba(0, 0, 0, .5); 
} 
 
.table_row.workplace_row { 
	margin: 5px 40px 0 40px; 
	height: 50px; 
} 
 
.table_row.title_table { 
	margin: 20px 40px 0 40px; 
	height: 40px; 
} 
 
.title_td { 
	height: 100%; 
} 
 
.title_td.td_1 { 
	float: left; 
	width: 250px; 
} 
 
.title_table.p{ 
	color: #435063; 
	font-size: 13px; 
	font-weight: bold; 
	margin: 13px 20px 0; 
} 
 
.title_td.td_2 { 
	float: left; 
	width: 550; 
} 
 
.title_td.td_3 { 
	float: left; 
	width: 300; 
} 
 
.title_td.td_4 { 
	float: left; 
	width: 200px; 
} 
 
.title_td.td_5 { 
	float: right; 
	width: 100px; 
} 
 
.workplace_td { 
	position: absolute; 
} 
 
.workplace_td.icon_block { 
	position: absolute; 
	width: 30px; 
	height: 30px; 
	border-radius: 3px; 
	margin: 10px 0 0 19px; 
} 
 
.workplace_td.icon_block.active { 
	background: #B2D170; 
} 
 
.workplace_td.icon_block.not_active { 
	background: #FF5943; 
} 
 
.workplace_td.pointer { 
	margin: 14px 0 0 37px; 
	display: none; 
} 
 
.workplace_td.icon.pointer a{ 
	display: block; 
	width: 24px; 
	height: 24px; 
} 
 
.workplace_td.title { 
	margin: 0 0 0 35px; 
} 
 
.workplace_td.title p{ 
	color: #435063; 
	font-size: 14px; 
	font-weight: bold; 
	margin: 17px 0 0 25px; 
} 
 
.workplace_td.date p{ 
	color: #435063; 
	font-size: 14px; 
	font-weight: bold; 
	margin: 17px 0 0 20px; 
} 
 
.item_body{ 
	width: 1400px; 
	height: 300px; 
	background: #ffffff; 
	border-radius: 0 0 5px 5px; 
	/*margin: 0 0 0 40px;*/ 
	padding: 0 0 20px 0; 
	box-shadow: 0px 6px 9px -4px rgba(0, 0, 0, .5); 
	/*display: none;*/ 
} 
 
.list_title { 
	margin: 18px 0 0 5px; 
} 
 
.list_title h2{ 
	font-size: 16px; 
	font-weight: bold; 
} 
 
.list_title p{ 
	color: #b5babc; 
	font-size: 12px; 
	font-weight: normal; 
	margin: 5px 0 0 30px; 
} 
 
.list_row { 
	float: left; 
	width: 95.5%; 
	background: #ffffff; 
	height: 40px; 
	box-shadow: 0 0 9px -4px rgba(0, 0, 0, .5); 
} 
 
.list_row p{ 
	color: #435063; 
	font-size: 11px; 
	font-weight: bold; 
	margin: 13px 0 0 10px; 
} 
 
.list_row.title { 
	margin: 15px 0 0 35px; 
} 
 
.list_row.workrow { 
	margin: 5px 0 0px 35px; 
} 
 
.list_button{ 
	float: left; 
	width: 10%; 
	background: #ffffff; 
	height: 36px; 
	box-shadow: 0 0 9px -4px rgba(0, 0, 0, .5); 
	margin: 25px 0 0px 35px; 
} 
 
.list_button_title p{ 
	color: #435063; 
	font-size: 11px; 
	font-weight: bold; 
	margin: 13px 0 0 30px; 
} 
 
.list_button_icon { 
	position: absolute; 
	margin: 12px 0 0px 10px; 
} 
 
.list_hide{ 
	float: left; 
	font-size: 12px; 
	margin: 25px 0 0px 1295px; 
} 
 
.table_row.find_place { 
	margin: 20px 40px 0 40px; 
	width: 800px; 
	height: 650px; 
} 
 
.table_row.find_place select{ 
	margin: 0 0 0 30px; 
} 
 
.find_label { 
	float: left; 
	width: 800px; 
	margin: 30px 0 0 0; 
} 
 
.find_label label{ 
	color: #435063; 
	font-size: 16px; 
	margin: 0 0 0 30px; 
	font-weight: bold; 
} 
 
.find_label input{ 
	margin: 0 0 0 10px; 
	width: 243px; 
} 
 
.find_label.street input{ 
	width: 300px; 
} 
 
.find_label.home input{ 
	width: 90px; 
} 
 
.find_label.name input{ 
	width: 298px; 
} 
 
.button { 
  position: relative; 
  display: inline-block; 
  font-size: 90%; 
  font-weight: 700; 
  color: rgb(209,209,217); 
  text-decoration: none; 
  text-shadow: 0 -1px 2px rgba(0,0,0,.2); 
  padding: .5em 1em; 
  outline: none; 
  border-radius: 3px; 
  background: linear-gradient(rgb(63, 76, 94), rgb(50, 58, 69)) rgb(63, 76, 94); 
  box-shadow: 
   0 1px rgba(255,255,255,.2) inset, 
   0 3px 5px rgba(0,1,6,.5), 
   0 0 1px 1px rgba(0,1,6,.2); 
  transition: .2s ease-in-out; 
  margin: 30px 0 0 30px; 
} 
 
.button:hover:not(:active) { 
  background: linear-gradient(rgb(98, 114, 135), rgb(50, 58, 69)) rgb(98, 114, 135); 
} 
 
.button:active { 
  top: 1px; 
  background: linear-gradient(rgb(79, 96, 119), rgb(50, 58, 69)) rgb(79, 96, 119); 
  box-shadow: 0 -1px 3px rgba(0,0,0,.3), 0 1px 1px #fff, inset 0 1px 2px rgba(0,0,0,.8), inset 0 -1px 0 rgba(0,0,0,.05); 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<html> 
	<head> 
		<link href="style.css" rel="stylesheet" type="text/css"> 
		<script src="jquery-3.2.1.min.js"></script> 
		<script src="listhelpers.js"></script> 
	</head> 
	<body> 
		<div class="site_header"> 
			<div class="site_logo_icon"> 
				<svg width="26" height="36" viewBox="0 0 26 36" fill="none" xmlns="http://www.w3.org/2000/svg"> 
					<path fill-rule="evenodd" clip-rule="evenodd" d="M4 8H22C25 8 25 11 25 11V32C25 32 25 35 22 35H3.73244C3.38663 35.5978 2.74028 36 2 36C0.89543 36 0 35.1046 0 34C0 32.8954 0.89543 32 2 32C2.74028 32 3.38663 32.4022 3.73244 33H21C23 33.0288 23 31 23 31V12C23 12 23 10 21 10H5C3 10 3 12 3 12V24.2676C3.5978 24.6134 4 25.2597 4 26C4 27.1046 3.10457 28 2 28C0.89543 28 0 27.1046 0 26C0 25.2597 0.402199 24.6134 1 24.2676V11C1 11 1 8 4 8ZM26 5C26 6 25 6 25 6H1C1 6 0 6 0 5C0 4 1 4 1 4H8V2C8 2 8 0 10 0H16C18 0 18 2 18 2V4H25C25 4 26 4 26 5ZM16 4V2H10V4H16ZM9 14C9 14 9 13 10 13C11 13 11 14 11 14V29C11 29 11 30 10 30C9 30 9 29 9 29V14ZM15 14C15 14 15 13 16 13C17 13 17 14 17 14V29C17 29 17 30 16 30C15 30 15 29 15 29V14Z" fill="#00D4FF"/> 
				</svg> 
			</div> 
			<div class="site_logo_name"> 
				<p>ЭкоТэк</p> 
			</div> 
		</div> 
		<div class="side_menu"> 
		</div> 
		<div class="main_workplace"> 
			<div class="workplace_title"> 
				<h2>Лицевые счета</h2> 
				<h3>Всего счетов: 50 000</h3> 
			</div> 
			<div class="table_row title_table"> 
				<div class="title_td td_1"> 
					<p class="title_table p">ЛИЦЕВОЙ СЧЁТ</p> 
				</div> 
				<div class="title_td td_2"> 
					<p class="title_table p">АДРЕС</p> 
				</div> 
				<div class="title_td td_3"> 
					<p class="title_table p">СОБСТВЕННИК</p> 
				</div> 
				<div class="title_td td_4"> 
					<p class="title_table p">НОМЕР ДОГОВОРА</p> 
				</div> 
				<div class="title_td td_5"></div> 
			</div> 
			<div class="table_row workplace_row"> 
				<div class="title_td td_1"> 
					<div class="workplace_td icon_block active"> 
						<svg class="svg_" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> 
							<path fill-rule="evenodd" clip-rule="evenodd" d="M12 11V12H6V11H1V18H17V11H12ZM5 0V4H0V10H6V8H12V10H18V4H13V0H5ZM7 4L7 2H11V4H7ZM7 9H11V11H7V9Z" fill="white"/> 
						</svg> 
					</div> 
					<div class="workplace_td title"> 
						<p>л/c № 3843050000</p> 
					</div> 
				</div> 
				<div class="title_td td_2"> 
					<div class="workplace_td date"> 
						<p>653000, Кемеровская обл, Прокопьевск г, Селиванова ул, дом № 3, Кв. 7</p> 
					</div> 
				</div> 
				<div class="title_td td_3"> 
					<div class="workplace_td date"> 
						<p>Наумов Вячеслав Викторович</p> 
					</div> 
				</div> 
				<div class="title_td td_4"> 
					<div class="workplace_td date"> 
						<p>105298/2018</p> 
					</div> 
				</div> 
				<div class="title_td td_5"> 
					<div class="workplace_td pointer"> 
							<svg  width="24" height="24" viewBox="0 0 330.59 401.98"  xmlns="http://www.w3.org/2000/svg"> 
								<path cfill-rule="evenodd" d="M73.67,164.16H206.33a15,15,0,0,0,0-30H73.67a15,15,0,1,0,0,30Z" fill="323a45"/> 
								<path fill-rule="evenodd" d="M259.61,254h-8a16.27,16.27,0,0,0-16.26,16.26v19.65h40.56V270.24A16.27,16.27,0,0,0,259.61,254Z" fill="323a45"/> 
								<path fill-rule="evenodd" d="M319.31,271.58v-1.34A59.8,59.8,0,0,0,280,214.13V73.7a14.82,14.82,0,0,0-4.34-10.48L216.78,4.34A14.82,14.82,0,0,0,206.3,0H29.11A29.14,29.14,0,0,0,0,29.11v312.1a29.14,29.14,0,0,0,29.11,29.11H180.59v1.44A30.26,30.26,0,0,0,210.82,402h89.54a30.26,30.26,0,0,0,30.23-30.22V295.12A30.18,30.18,0,0,0,319.31,271.58Zm-127.44-1.34v1.34a30.18,30.18,0,0,0-11.28,23.54v42.79h-149V32.41H185.7V76A19.12,19.12,0,0,0,204.81,95.1h43.58V210.62a59.42,59.42,0,0,0-36.14,14.75,15,15,0,0,0-5.92-1.21H73.67a15,15,0,1,0,0,30H194.09A59.3,59.3,0,0,0,191.87,270.24Zm113.72,45.24H287.82a8.11,8.11,0,1,0,0,16.22h17.77v15H287.82a8.12,8.12,0,0,0,0,16.23h17.77v8.83a5.23,5.23,0,0,1-5.23,5.22H210.82a5.23,5.23,0,0,1-5.23-5.22V295.12a5.23,5.23,0,0,1,5.23-5.23h6.05V270.24a34.73,34.73,0,0,1,34.7-34.7h8a34.73,34.73,0,0,1,34.7,34.7v19.65h6.05a5.23,5.23,0,0,1,5.23,5.23v20.36Z" fill="323a45"/> 
							</svg> 
					</div> 
				</div> 
				<div class="item_body"> 
				 
				</div> 
			</div> 
			<div class="table_row workplace_row"> 
				<div class="title_td td_1"> 
					<div class="workplace_td icon_block active"> 
						<svg class="svg_" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> 
							<path fill-rule="evenodd" clip-rule="evenodd" d="M12 11V12H6V11H1V18H17V11H12ZM5 0V4H0V10H6V8H12V10H18V4H13V0H5ZM7 4L7 2H11V4H7ZM7 9H11V11H7V9Z" fill="white"/> 
						</svg> 
					</div> 
					<div class="workplace_td title"> 
						<p>л/c № 3843050000</p> 
					</div> 
				</div> 
				<div class="title_td td_2"> 
					<div class="workplace_td date"> 
						<p>653000, Кемеровская обл, Прокопьевск г, Селиванова ул, дом № 3, Кв. 7</p> 
					</div> 
				</div> 
				<div class="title_td td_3"> 
					<div class="workplace_td date"> 
						<p>Наумов Вячеслав Викторович</p> 
					</div> 
				</div> 
				<div class="title_td td_4"> 
					<div class="workplace_td date"> 
						<p>105298/2018</p> 
					</div> 
				</div> 
				<div class="title_td td_5"> 
					<div class="workplace_td pointer"> 
							<svg  width="24" height="24" viewBox="0 0 330.59 401.98"  xmlns="http://www.w3.org/2000/svg"> 
								<path cfill-rule="evenodd" d="M73.67,164.16H206.33a15,15,0,0,0,0-30H73.67a15,15,0,1,0,0,30Z" fill="323a45"/> 
								<path fill-rule="evenodd" d="M259.61,254h-8a16.27,16.27,0,0,0-16.26,16.26v19.65h40.56V270.24A16.27,16.27,0,0,0,259.61,254Z" fill="323a45"/> 
								<path fill-rule="evenodd" d="M319.31,271.58v-1.34A59.8,59.8,0,0,0,280,214.13V73.7a14.82,14.82,0,0,0-4.34-10.48L216.78,4.34A14.82,14.82,0,0,0,206.3,0H29.11A29.14,29.14,0,0,0,0,29.11v312.1a29.14,29.14,0,0,0,29.11,29.11H180.59v1.44A30.26,30.26,0,0,0,210.82,402h89.54a30.26,30.26,0,0,0,30.23-30.22V295.12A30.18,30.18,0,0,0,319.31,271.58Zm-127.44-1.34v1.34a30.18,30.18,0,0,0-11.28,23.54v42.79h-149V32.41H185.7V76A19.12,19.12,0,0,0,204.81,95.1h43.58V210.62a59.42,59.42,0,0,0-36.14,14.75,15,15,0,0,0-5.92-1.21H73.67a15,15,0,1,0,0,30H194.09A59.3,59.3,0,0,0,191.87,270.24Zm113.72,45.24H287.82a8.11,8.11,0,1,0,0,16.22h17.77v15H287.82a8.12,8.12,0,0,0,0,16.23h17.77v8.83a5.23,5.23,0,0,1-5.23,5.22H210.82a5.23,5.23,0,0,1-5.23-5.22V295.12a5.23,5.23,0,0,1,5.23-5.23h6.05V270.24a34.73,34.73,0,0,1,34.7-34.7h8a34.73,34.73,0,0,1,34.7,34.7v19.65h6.05a5.23,5.23,0,0,1,5.23,5.23v20.36Z" fill="323a45"/> 
							</svg> 
					</div> 
				</div> 
			</div> 
		</div> 
	</body> 
</html>

Простите за большой код, все, что мог, убрал! Проблема в том, что появляющийся блок не смещает строку! Подскажите пожалуйста

Answer 1

Блок .table_row.workplace_row имеет фиксированую высоту. Из за этого следующий блок не смещается в низ. Когда блок "Активен" вам нужно менять его высоту на auto. В примере это делается через класс --is_show.

$(document).ready(function() { 
  $('div.table_row.workplace_row').hover( 
    function() { 
      $(this).find('div.workplace_td.pointer').fadeIn(200) 
    }, 
    function() { 
      $(this).find('div.workplace_td.pointer').fadeOut(200) 
    }).click( 
    function() { 
      $(this).find('div.item_body').fadeToggle(200); 
      $(this).toggleClass('--is_show').css({ 
        'border-radius': '5px 5px 0 0' 
      }); 
    } 
  ) 
});
/* ---- New ---- */ 
.table_row.workplace_row { 
  overflow: hidden; 
} 
.workplace_row.--is_show { 
  height: auto !important; 
} 
/* ---- | ---- */ 
 
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700'); 
body, 
html { 
  width: 100%; 
  height: 100%; 
} 
 
body { 
  margin: 0; 
  background: #000; 
} 
 
h1, 
h2, 
h3, 
h4, 
label, 
input { 
  font-family: Roboto, sans-serif; 
} 
 
h2 { 
  color: #435063; 
  font-size: 22px; 
  margin: 20px 0 0 30px; 
} 
 
h3 { 
  color: #b5babc; 
  font-size: 12px; 
  font-weight: normal; 
  margin: 5px 0 0 30px; 
} 
 
p { 
  font-family: Roboto, sans-serif; 
} 
 
a { 
  font-family: Roboto, sans-serif; 
  text-decoration: none; 
} 
 
.site_header { 
  position: absolute; 
  width: 100% - 300px; 
  background: #29313C; 
  height: 66px; 
  z-index: 2; 
  left: 150px; 
  right: 150px; 
  top: 0%; 
  bottom: 0%; 
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3); 
} 
 
.site_logo_icon { 
  position: absolute; 
  margin: 15px 0 0 27px; 
} 
 
.site_logo_name { 
  position: absolute; 
  margin: 17px 0 0 63px; 
} 
 
.site_logo_name p { 
  color: #f2f2f2; 
  font-size: 30px; 
  font-weight: bold; 
  margin: 0 0 0 0; 
} 
 
.side_menu { 
  position: absolute; 
  height: 100% - 66px; 
  background: #323A45; 
  width: 80px; 
  z-index: 1; 
  top: 66px; 
  left: 150px; 
  right: 0%; 
  bottom: 0%; 
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); 
} 
 
.side_button { 
  float: left; 
  width: 50px; 
  height: 40px; 
  background: #282E37; 
  border-radius: 4px; 
} 
 
.side_button.first { 
  margin: 30px 0 0 13px; 
} 
 
.side_button.second { 
  margin: 5px 0 0 13px; 
} 
 
.side_button a { 
  display: block; 
  height: 40px; 
  width: 50px; 
} 
 
.side_button img { 
  margin: -18px 0 0 -29px; 
} 
 
.side_button_image { 
  position: absolute; 
  margin: 13px 0 0 16px; 
} 
 
.svg_ { 
  margin: 6px 0 0 6px; 
} 
 
.svg_client { 
  margin: 6px 0 0 8px; 
} 
 
.svg_error { 
  margin: 13px 0 0 12px; 
} 
 
.svg_side_button { 
  margin: 13px 0 0 16px; 
} 
 
.svg_side_find { 
  margin: 8px 0 0 12px; 
} 
 
.svg_side_money { 
  margin: 7.5px 0 0 12.5px; 
} 
 
.svg_side_report { 
  margin: 7px 0 0 12.5px; 
} 
 
.main_workplace { 
  position: absolute; 
  background: #f2f2f2; 
  height: 100% - 66px; 
  width: 100% - 230px; 
  top: 66px; 
  left: 230px; 
  right: 150px; 
  bottom: 0%; 
  overflow: auto; 
} 
 
.workplace_title { 
  width: 400px; 
  height: 42px; 
  margin: 25px 0 0 10px; 
} 
 
.table_row { 
  width: 1400px; 
  background: #ffffff; 
  border-radius: 5px; 
  margin: 2px 30px 0; 
  box-shadow: 0 0 9px -4px rgba(0, 0, 0, .5); 
} 
 
.table_row.workplace_row { 
  margin: 5px 40px 0 40px; 
  height: 50px; 
} 
 
.table_row.title_table { 
  margin: 20px 40px 0 40px; 
  height: 40px; 
} 
 
.title_td { 
  height: 100%; 
} 
 
.title_td.td_1 { 
  float: left; 
  width: 250px; 
} 
 
.title_table.p { 
  color: #435063; 
  font-size: 13px; 
  font-weight: bold; 
  margin: 13px 20px 0; 
} 
 
.title_td.td_2 { 
  float: left; 
  width: 550; 
} 
 
.title_td.td_3 { 
  float: left; 
  width: 300; 
} 
 
.title_td.td_4 { 
  float: left; 
  width: 200px; 
} 
 
.title_td.td_5 { 
  float: right; 
  width: 100px; 
} 
 
.workplace_td { 
  position: absolute; 
} 
 
.workplace_td.icon_block { 
  position: absolute; 
  width: 30px; 
  height: 30px; 
  border-radius: 3px; 
  margin: 10px 0 0 19px; 
} 
 
.workplace_td.icon_block.active { 
  background: #B2D170; 
} 
 
.workplace_td.icon_block.not_active { 
  background: #FF5943; 
} 
 
.workplace_td.pointer { 
  margin: 14px 0 0 37px; 
  display: none; 
} 
 
.workplace_td.icon.pointer a { 
  display: block; 
  width: 24px; 
  height: 24px; 
} 
 
.workplace_td.title { 
  margin: 0 0 0 35px; 
} 
 
.workplace_td.title p { 
  color: #435063; 
  font-size: 14px; 
  font-weight: bold; 
  margin: 17px 0 0 25px; 
} 
 
.workplace_td.date p { 
  color: #435063; 
  font-size: 14px; 
  font-weight: bold; 
  margin: 17px 0 0 20px; 
} 
 
.item_body { 
  width: 1400px; 
  height: 300px; 
  background: #ffffff; 
  border-radius: 0 0 5px 5px; 
  /*margin: 0 0 0 40px;*/ 
  padding: 0 0 20px 0; 
  box-shadow: 0px 6px 9px -4px rgba(0, 0, 0, .5); 
  /*display: none;*/ 
} 
 
.list_title { 
  margin: 18px 0 0 5px; 
} 
 
.list_title h2 { 
  font-size: 16px; 
  font-weight: bold; 
} 
 
.list_title p { 
  color: #b5babc; 
  font-size: 12px; 
  font-weight: normal; 
  margin: 5px 0 0 30px; 
} 
 
.list_row { 
  float: left; 
  width: 95.5%; 
  background: #ffffff; 
  height: 40px; 
  box-shadow: 0 0 9px -4px rgba(0, 0, 0, .5); 
} 
 
.list_row p { 
  color: #435063; 
  font-size: 11px; 
  font-weight: bold; 
  margin: 13px 0 0 10px; 
} 
 
.list_row.title { 
  margin: 15px 0 0 35px; 
} 
 
.list_row.workrow { 
  margin: 5px 0 0px 35px; 
} 
 
.list_button { 
  float: left; 
  width: 10%; 
  background: #ffffff; 
  height: 36px; 
  box-shadow: 0 0 9px -4px rgba(0, 0, 0, .5); 
  margin: 25px 0 0px 35px; 
} 
 
.list_button_title p { 
  color: #435063; 
  font-size: 11px; 
  font-weight: bold; 
  margin: 13px 0 0 30px; 
} 
 
.list_button_icon { 
  position: absolute; 
  margin: 12px 0 0px 10px; 
} 
 
.list_hide { 
  float: left; 
  font-size: 12px; 
  margin: 25px 0 0px 1295px; 
} 
 
.table_row.find_place { 
  margin: 20px 40px 0 40px; 
  width: 800px; 
  height: 650px; 
} 
 
.table_row.find_place select { 
  margin: 0 0 0 30px; 
} 
 
.find_label { 
  float: left; 
  width: 800px; 
  margin: 30px 0 0 0; 
} 
 
.find_label label { 
  color: #435063; 
  font-size: 16px; 
  margin: 0 0 0 30px; 
  font-weight: bold; 
} 
 
.find_label input { 
  margin: 0 0 0 10px; 
  width: 243px; 
} 
 
.find_label.street input { 
  width: 300px; 
} 
 
.find_label.home input { 
  width: 90px; 
} 
 
.find_label.name input { 
  width: 298px; 
} 
 
.button { 
  position: relative; 
  display: inline-block; 
  font-size: 90%; 
  font-weight: 700; 
  color: rgb(209, 209, 217); 
  text-decoration: none; 
  text-shadow: 0 -1px 2px rgba(0, 0, 0, .2); 
  padding: .5em 1em; 
  outline: none; 
  border-radius: 3px; 
  background: linear-gradient(rgb(63, 76, 94), rgb(50, 58, 69)) rgb(63, 76, 94); 
  box-shadow: 0 1px rgba(255, 255, 255, .2) inset, 0 3px 5px rgba(0, 1, 6, .5), 0 0 1px 1px rgba(0, 1, 6, .2); 
  transition: .2s ease-in-out; 
  margin: 30px 0 0 30px; 
} 
 
.button:hover:not(:active) { 
  background: linear-gradient(rgb(98, 114, 135), rgb(50, 58, 69)) rgb(98, 114, 135); 
} 
 
.button:active { 
  top: 1px; 
  background: linear-gradient(rgb(79, 96, 119), rgb(50, 58, 69)) rgb(79, 96, 119); 
  box-shadow: 0 -1px 3px rgba(0, 0, 0, .3), 0 1px 1px #fff, inset 0 1px 2px rgba(0, 0, 0, .8), inset 0 -1px 0 rgba(0, 0, 0, .05); 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<html> 
 
<head> 
  <link href="style.css" rel="stylesheet" type="text/css"> 
  <script src="jquery-3.2.1.min.js"></script> 
  <script src="listhelpers.js"></script> 
</head> 
 
<body> 
  <div class="site_header"> 
    <div class="site_logo_icon"> 
      <svg width="26" height="36" viewBox="0 0 26 36" fill="none" xmlns="http://www.w3.org/2000/svg"> 
					<path fill-rule="evenodd" clip-rule="evenodd" d="M4 8H22C25 8 25 11 25 11V32C25 32 25 35 22 35H3.73244C3.38663 35.5978 2.74028 36 2 36C0.89543 36 0 35.1046 0 34C0 32.8954 0.89543 32 2 32C2.74028 32 3.38663 32.4022 3.73244 33H21C23 33.0288 23 31 23 31V12C23 12 23 10 21 10H5C3 10 3 12 3 12V24.2676C3.5978 24.6134 4 25.2597 4 26C4 27.1046 3.10457 28 2 28C0.89543 28 0 27.1046 0 26C0 25.2597 0.402199 24.6134 1 24.2676V11C1 11 1 8 4 8ZM26 5C26 6 25 6 25 6H1C1 6 0 6 0 5C0 4 1 4 1 4H8V2C8 2 8 0 10 0H16C18 0 18 2 18 2V4H25C25 4 26 4 26 5ZM16 4V2H10V4H16ZM9 14C9 14 9 13 10 13C11 13 11 14 11 14V29C11 29 11 30 10 30C9 30 9 29 9 29V14ZM15 14C15 14 15 13 16 13C17 13 17 14 17 14V29C17 29 17 30 16 30C15 30 15 29 15 29V14Z" fill="#00D4FF"/> 
				</svg> 
    </div> 
    <div class="site_logo_name"> 
      <p>ЭкоТэк</p> 
    </div> 
  </div> 
  <div class="side_menu"> 
  </div> 
  <div class="main_workplace"> 
    <div class="workplace_title"> 
      <h2>Лицевые счета</h2> 
      <h3>Всего счетов: 50 000</h3> 
    </div> 
    <div class="table_row title_table"> 
      <div class="title_td td_1"> 
        <p class="title_table p">ЛИЦЕВОЙ СЧЁТ</p> 
      </div> 
      <div class="title_td td_2"> 
        <p class="title_table p">АДРЕС</p> 
      </div> 
      <div class="title_td td_3"> 
        <p class="title_table p">СОБСТВЕННИК</p> 
      </div> 
      <div class="title_td td_4"> 
        <p class="title_table p">НОМЕР ДОГОВОРА</p> 
      </div> 
      <div class="title_td td_5"></div> 
    </div> 
    <div class="table_row workplace_row --is_show"> 
      <div class="title_td td_1"> 
        <div class="workplace_td icon_block active"> 
          <svg class="svg_" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> 
							<path fill-rule="evenodd" clip-rule="evenodd" d="M12 11V12H6V11H1V18H17V11H12ZM5 0V4H0V10H6V8H12V10H18V4H13V0H5ZM7 4L7 2H11V4H7ZM7 9H11V11H7V9Z" fill="white"/> 
						</svg> 
        </div> 
        <div class="workplace_td title"> 
          <p>л/c № 3843050000</p> 
        </div> 
      </div> 
      <div class="title_td td_2"> 
        <div class="workplace_td date"> 
          <p>653000, Кемеровская обл, Прокопьевск г, Селиванова ул, дом № 3, Кв. 7</p> 
        </div> 
      </div> 
      <div class="title_td td_3"> 
        <div class="workplace_td date"> 
          <p>Наумов Вячеслав Викторович</p> 
        </div> 
      </div> 
      <div class="title_td td_4"> 
        <div class="workplace_td date"> 
          <p>105298/2018</p> 
        </div> 
      </div> 
      <div class="title_td td_5"> 
        <div class="workplace_td pointer"> 
          <svg width="24" height="24" viewBox="0 0 330.59 401.98" xmlns="http://www.w3.org/2000/svg"> 
								<path cfill-rule="evenodd" d="M73.67,164.16H206.33a15,15,0,0,0,0-30H73.67a15,15,0,1,0,0,30Z" fill="323a45"/> 
								<path fill-rule="evenodd" d="M259.61,254h-8a16.27,16.27,0,0,0-16.26,16.26v19.65h40.56V270.24A16.27,16.27,0,0,0,259.61,254Z" fill="323a45"/> 
								<path fill-rule="evenodd" d="M319.31,271.58v-1.34A59.8,59.8,0,0,0,280,214.13V73.7a14.82,14.82,0,0,0-4.34-10.48L216.78,4.34A14.82,14.82,0,0,0,206.3,0H29.11A29.14,29.14,0,0,0,0,29.11v312.1a29.14,29.14,0,0,0,29.11,29.11H180.59v1.44A30.26,30.26,0,0,0,210.82,402h89.54a30.26,30.26,0,0,0,30.23-30.22V295.12A30.18,30.18,0,0,0,319.31,271.58Zm-127.44-1.34v1.34a30.18,30.18,0,0,0-11.28,23.54v42.79h-149V32.41H185.7V76A19.12,19.12,0,0,0,204.81,95.1h43.58V210.62a59.42,59.42,0,0,0-36.14,14.75,15,15,0,0,0-5.92-1.21H73.67a15,15,0,1,0,0,30H194.09A59.3,59.3,0,0,0,191.87,270.24Zm113.72,45.24H287.82a8.11,8.11,0,1,0,0,16.22h17.77v15H287.82a8.12,8.12,0,0,0,0,16.23h17.77v8.83a5.23,5.23,0,0,1-5.23,5.22H210.82a5.23,5.23,0,0,1-5.23-5.22V295.12a5.23,5.23,0,0,1,5.23-5.23h6.05V270.24a34.73,34.73,0,0,1,34.7-34.7h8a34.73,34.73,0,0,1,34.7,34.7v19.65h6.05a5.23,5.23,0,0,1,5.23,5.23v20.36Z" fill="323a45"/> 
							</svg> 
        </div> 
      </div> 
      <div class="item_body"> 
 
      </div> 
    </div> 
    <div class="table_row workplace_row"> 
      <div class="title_td td_1"> 
        <div class="workplace_td icon_block active"> 
          <svg class="svg_" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> 
							<path fill-rule="evenodd" clip-rule="evenodd" d="M12 11V12H6V11H1V18H17V11H12ZM5 0V4H0V10H6V8H12V10H18V4H13V0H5ZM7 4L7 2H11V4H7ZM7 9H11V11H7V9Z" fill="white"/> 
						</svg> 
        </div> 
        <div class="workplace_td title"> 
          <p>л/c № 3843050000</p> 
        </div> 
      </div> 
      <div class="title_td td_2"> 
        <div class="workplace_td date"> 
          <p>653000, Кемеровская обл, Прокопьевск г, Селиванова ул, дом № 3, Кв. 7</p> 
        </div> 
      </div> 
      <div class="title_td td_3"> 
        <div class="workplace_td date"> 
          <p>Наумов Вячеслав Викторович</p> 
        </div> 
      </div> 
      <div class="title_td td_4"> 
        <div class="workplace_td date"> 
          <p>105298/2018</p> 
        </div> 
      </div> 
      <div class="title_td td_5"> 
        <div class="workplace_td pointer"> 
          <svg width="24" height="24" viewBox="0 0 330.59 401.98" xmlns="http://www.w3.org/2000/svg"> 
								<path cfill-rule="evenodd" d="M73.67,164.16H206.33a15,15,0,0,0,0-30H73.67a15,15,0,1,0,0,30Z" fill="323a45"/> 
								<path fill-rule="evenodd" d="M259.61,254h-8a16.27,16.27,0,0,0-16.26,16.26v19.65h40.56V270.24A16.27,16.27,0,0,0,259.61,254Z" fill="323a45"/> 
								<path fill-rule="evenodd" d="M319.31,271.58v-1.34A59.8,59.8,0,0,0,280,214.13V73.7a14.82,14.82,0,0,0-4.34-10.48L216.78,4.34A14.82,14.82,0,0,0,206.3,0H29.11A29.14,29.14,0,0,0,0,29.11v312.1a29.14,29.14,0,0,0,29.11,29.11H180.59v1.44A30.26,30.26,0,0,0,210.82,402h89.54a30.26,30.26,0,0,0,30.23-30.22V295.12A30.18,30.18,0,0,0,319.31,271.58Zm-127.44-1.34v1.34a30.18,30.18,0,0,0-11.28,23.54v42.79h-149V32.41H185.7V76A19.12,19.12,0,0,0,204.81,95.1h43.58V210.62a59.42,59.42,0,0,0-36.14,14.75,15,15,0,0,0-5.92-1.21H73.67a15,15,0,1,0,0,30H194.09A59.3,59.3,0,0,0,191.87,270.24Zm113.72,45.24H287.82a8.11,8.11,0,1,0,0,16.22h17.77v15H287.82a8.12,8.12,0,0,0,0,16.23h17.77v8.83a5.23,5.23,0,0,1-5.23,5.22H210.82a5.23,5.23,0,0,1-5.23-5.22V295.12a5.23,5.23,0,0,1,5.23-5.23h6.05V270.24a34.73,34.73,0,0,1,34.7-34.7h8a34.73,34.73,0,0,1,34.7,34.7v19.65h6.05a5.23,5.23,0,0,1,5.23,5.23v20.36Z" fill="323a45"/> 
							</svg> 
        </div> 
      </div> 
    </div> 
  </div> 
</body> 
 
</html>

READ ALSO
Нужно поднять блок с картинками CSS,HTML,Bootstrap3

Нужно поднять блок с картинками CSS,HTML,Bootstrap3

хочу поднять блок с картинками регистрации и логина на 50 пикселей в верхно при использовании margin-top:50px; не работает почему хз

84
Валидация в инпуте react

Валидация в инпуте react

Всем привет, у меня есть 2 инпута

120
Как сделать фон сайта из разных gif

Как сделать фон сайта из разных gif

Пытаюсь сделать фон из нескольких gif-картинокХотелось бы чтобы и справа была гифка и слева, и соответственно так же вверху и внизу

103
Автоматическая прокрутка Django, JS, HTML

Автоматическая прокрутка Django, JS, HTML

Как добавить автоматическую прокрутку в чат ? Вот пример кода, который я думаю отвечает за показ сообщений и следовательно сюда куда-то можно...

122