Не растягивать flex по высоте
255
10 марта 2018, 17:46
Как отменить растягивание блока search-box?
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 10px;
}
body .top {
background-color: #ededed;
margin-bottom: 80px;
}
body .top .row {
height: 100px;
align-items: center;
}
body .top .navigation {
color: #1a1919;
font-family: "Open Sans";
font-size: 14px;
font-weight: 400;
line-height: 24px;
}
body .top .navigation ul {
display: flex;
justify-content: flex-end;
}
body .top .navigation ul li {
list-style-type: none;
}
body .top .navigation ul a {
padding-right: 30px;
color: black;
}
body .top .navigation-active {
color: #df3636;
}
body .top .page {
color: #1a1919;
font-family: Oswald;
font-size: 24px;
font-weight: 700;
line-height: 24px;
}
body .search-box {
flex-basis: auto;
background-color: #1b1b1b;
color: white;
padding: 20px;
flex: auto;
}
body .search-box button[type="submit"] {
color: #ffffff;
font-family: "Open Sans";
font-size: 14px;
font-weight: 700;
line-height: 24px;
text-transform: uppercase;
letter-spacing: 0.42px;
background-color: #df3636;
width: 100%;
height: 50px;
}
body .search-box button {
color: red;
background-color: transparent;
border: none;
margin-top: 20px;
}
body .search-box select {
background-color: #313131;
color: #999999;
font-family: "Open Sans";
font-size: 14px;
font-weight: 400;
line-height: 24px;
width: 100%;
height: 40px;
padding: 5px 10px;
margin-bottom: 15px;
border: none;
}
body .search-box .disc {
color: #ffffff;
font-family: Open Sans;
font-size: 14px;
font-weight: 400;
line-height: 24px;
padding: 10px 0;
}
body .search-box .title {
color: #ffffff;
font-family: "Open Sans";
font-size: 18px;
font-weight: 700;
line-height: 24px;
text-transform: uppercase;
text-align: center;
padding-bottom: 30px;
}
body .content {
color: #1a1919;
font-family: Oswald;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
body .content .col {
padding: 0px;
}
body .content .sort {
border-bottom: 1px solid #e9e9e9;
padding-bottom: 30px;
margin-left: 20px;
}
body .content select {
background-color: #e9e9e9;
color: #999999;
font-family: "Open Sans";
font-size: 14px;
font-weight: 400;
line-height: 24px;
height: 40px;
padding: 5px 10px;
margin-left: 10px;
border: none;
}
body .content .filter {
border-radius: 13px;
background-color: #f2f2f2;
color: #393939;
font-family: Montserrat;
font-size: 14px;
padding: 0px 10px;
margin: 20px;
}
body .content .filter span {
color: #df3636;
padding-right: 10px;
}
body .content .price {
background-color: #df3636;
color: #ffffff;
font-family: "Open Sans";
font-size: 20px;
font-weight: 700;
text-transform: uppercase;
padding: 5px 15px;
}
body .content .photo-car {
border: 1px solid #e9e9e9;
}
body .content .photo-car img {
width: 100%;
}
body .content .model {
color: #1d1d1d;
font-family: "Open Sans";
font-size: 14px;
font-weight: 700;
line-height: 26.4px;
text-transform: uppercase;
padding: 10px 0;
}
body .content .add {
color: #1d1d1d;
font-family: "Open Sans";
font-size: 14px;
font-weight: 700;
line-height: 26.4px;
}
/*# sourceMappingURL=main.css.map */<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1" content="width=device-width">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="section top">
<div class="container">
<div class="row">
<div class="col page">Inventory</div>
<!-- /.page -->
<div class="col navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Inventory</a></li>
<li class="navigation-active">Gird standard style 1</li>
</ul>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</div>
<!-- /.section -->
<div class="section">
<div class="container">
<div class="row">
<div class="col-3 search-box">
<div class="serch">
<div class="title">Search inventory</div>
<form action="#" method="post">
<div class="disc">Condition</div>
<select>
<option>new</option>
</select>
<div class="disc">Body</div>
<select>
<option>Compact</option>
</select>
<div class="disc">Make</div>
<select>
<option>BMW</option>
</select>
<div class="disc">Model</div>
<select>
<option>x6</option>
</select>
<div class="disc">Max Mileage</div>
<select>
<option>new</option>
</select>
<div class="disc">Year</div>
<select>
<option>2016</option>
</select>
<div class="disc">Transmission</div>
<select>
<option>Automatic</option>
</select>
<div class="disc">Color</div>
<select>
<option>All color</option>
</select>
<button type="submit">SEARCH</button>
<button type="reset">Reset all</button></p>
</form>
</div>
</div>
</row>
<div class="col-9 content">
<div class="row">
<div class="col sort">
SORT BY
<select>
<option>Date: Newest first</option>
</select>
</div>
<!-- /.col sort -->
</div>
<div class="row filtes">
<div class="filter">Pricice <span>$2000 - $65.765</span>
<a href="#"><img src="image/X.png"></a>
</div>
<!-- /.filter-one -->
</div>
<!-- /.row filter -->
<!-- /.row -->
<div class="row block-car">
<div class="col-4 car">
<div class="photo-car"><img src="image/kia.jpg" width="270px" height="150px"></div>
<!-- /.photo-car -->
<div class="price">$45.000</div>
<!-- /.price -->
<div class="model">BMW 535I, NAVI, LEATHER, ABS</div>
<!-- /.model -->
<div class="add">45/65 Automatic </div>
<!-- /.add -->
</div>
<!-- /.col car -->
<div class="col-4 car">
<div class="photo-car"><img src="image/kia.jpg" width="270px" height="150px"></div>
<!-- /.photo-car -->
<div class="price">$45.000</div>
<!-- /.price -->
<div class="model">BMW 535I, NAVI, LEATHER, ABS</div>
<!-- /.model -->
<div class="add">45/65 Automatic </div>
<!-- /.add -->
</div>
<!-- /.col car -->
<div class="col-4 car">
<div class="photo-car"><img src="image/kia.jpg" width="270px" height="150px"></div>
<!-- /.photo-car -->
<div class="price">$45.000</div>
<!-- /.price -->
<div class="model">BMW 535I, NAVI, LEATHER, ABS</div>
<!-- /.model -->
<div class="add">45/65 Automatic </div>
<!-- /.add -->
</div>
<!-- /.col car -->
<div class="col-4 car">
<div class="photo-car"><img src="image/kia.jpg" width="270px" height="150px"></div>
<!-- /.photo-car -->
<div class="price">$45.000</div>
<!-- /.price -->
<div class="model">BMW 535I, NAVI, LEATHER, ABS</div>
<!-- /.model -->
<div class="add">45/65 Automatic </div>
<!-- /.add -->
</div>
<!-- /.col car -->
<div class="col-4 car">
<div class="photo-car"><img src="image/kia.jpg" width="270px" height="150px"></div>
<!-- /.photo-car -->
<div class="price">$45.000</div>
<!-- /.price -->
<div class="model">BMW 535I, NAVI, LEATHER, ABS</div>
<!-- /.model -->
<div class="add">45/65 Automatic </div>
<!-- /.add -->
</div>
<!-- /.col car -->
<div class="col-4 car">
<div class="photo-car"><img src="image/kia.jpg" width="270px" height="150px"></div>
<!-- /.photo-car -->
<div class="price">$45.000</div>
<!-- /.price -->
<div class="model">BMW 535I, NAVI, LEATHER, ABS</div>
<!-- /.model -->
<div class="add">45/65 Automatic </div>
<!-- /.add -->
</div>
<!-- /.col car -->
<div class="col-4 car">
<div class="photo-car"><img src="image/kia.jpg" width="270px" height="150px"></div>
<!-- /.photo-car -->
<div class="price">$45.000</div>
<!-- /.price -->
<div class="model">BMW 535I, NAVI, LEATHER, ABS</div>
<!-- /.model -->
<div class="add">45/65 Automatic </div>
<!-- /.add -->
</div>
<!-- /.col car -->
<div class="col-4 car">
<div class="photo-car"><img src="image/kia.jpg" width="270px" height="150px"></div>
<!-- /.photo-car -->
<div class="price">$45.000</div>
<!-- /.price -->
<div class="model">BMW 535I, NAVI, LEATHER, ABS</div>
<!-- /.model -->
<div class="add">45/65 Automatic </div>
<!-- /.add -->
</div>
<!-- /.col car -->
<div class="col-4 car">
<div class="photo-car"><img src="image/kia.jpg" width="270px" height="150px"></div>
<!-- /.photo-car -->
<div class="price">$45.000</div>
<!-- /.price -->
<div class="model">BMW 535I, NAVI, LEATHER, ABS</div>
<!-- /.model -->
<div class="add">45/65 Automatic </div>
<!-- /.add -->
</div>
<!-- /.col car -->
<div class="col-4 car">
<div class="photo-car"><img src="image/kia.jpg" width="270px" height="150px"></div>
<!-- /.photo-car -->
<div class="price">$45.000</div>
<!-- /.price -->
<div class="model">BMW 535I, NAVI, LEATHER, ABS</div>
<!-- /.model -->
<div class="add">45/65 Automatic </div>
<!-- /.add -->
</div>
<!-- /.col car -->
<div class="col-4 car">
<div class="photo-car"><img src="image/kia.jpg" width="270px" height="150px"></div>
<!-- /.photo-car -->
<div class="price">$45.000</div>
<!-- /.price -->
<div class="model">BMW 535I, NAVI, LEATHER, ABS</div>
<!-- /.model -->
<div class="add">45/65 Automatic </div>
<!-- /.add -->
</div>
<!-- /.col car -->
<div class="col-4 car">
<div class="photo-car"><img src="image/kia.jpg" width="270px" height="150px"></div>
<!-- /.photo-car -->
<div class="price">$45.000</div>
<!-- /.price -->
<div class="model">BMW 535I, NAVI, LEATHER, ABS</div>
<!-- /.model -->
<div class="add">45/65 Automatic </div>
<!-- /.add -->
</div>
<!-- /.col car -->
<div class="col-4 car">
<div class="photo-car"><img src="image/kia.jpg" width="270px" height="150px"></div>
<!-- /.photo-car -->
<div class="price">$45.000</div>
<!-- /.price -->
<div class="model">BMW 535I, NAVI, LEATHER, ABS</div>
<!-- /.model -->
<div class="add">45/65 Automatic </div>
<!-- /.add -->
</div>
<!-- /.col car -->
<div class="col-4 car">
<div class="photo-car"><img src="image/kia.jpg" width="270px" height="150px"></div>
<!-- /.photo-car -->
<div class="price">$45.000</div>
<!-- /.price -->
<div class="model">BMW 535I, NAVI, LEATHER, ABS</div>
<!-- /.model -->
<div class="add">45/65 Automatic </div>
<!-- /.add -->
</div>
<!-- /.col car -->
<div class="col-4 car">
<div class="photo-car"><img src="image/kia.jpg" width="270px" height="150px"></div>
<!-- /.photo-car -->
<div class="price">$45.000</div>
<!-- /.price -->
<div class="model">BMW 535I, NAVI, LEATHER, ABS</div>
<!-- /.model -->
<div class="add">45/65 Automatic </div>
<!-- /.add -->
</div>
<!-- /.col car -->
</div>
<!-- /.row block-car -->
</div>
<!-- /.col-9 -->
</div>
</div>
<!-- /.container -->
</div>
<!-- /.section -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
</body>
</html>Answer 1
Добавить
align-items: flex-start; В родителя search-box
-
13:29
Кофе для программистов: как напиток влияет на продуктивность кодеров?
-
22:13
Рекламные вывески: как привлечь внимание и увеличить продажи
-
19:13
-
16:04
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
-
17:27
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
-
22:17
-
18:08
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
-
18:54
-
17:35
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47875 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30563 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23871 visits
- Как через css изменить цвет png изображения? 10388 visits
- Blob video url download 9998 visits
- Php curl запрос через прокси с авторизацией 9260 visits
- Работа с captcha vk api 8139 visits
© "hostciti.net" 16.3.2025 | 01:36