Как расположить объекты?

153

16 октября 2019, 09:50

Здравствуйте появилась опять проблема в позиционировании. Не понимаю почему так происходит, когда добавляю значение float: left;, чтобы расположить объекты в строчку, следующие исчезаю со страницы. почему так, объясните пожалуйста, буду очень признателен.

Надо расположить объекты col-sm-4 в строку по 3, а col-sm-6 по 2, и если не сложно, то дайте пожалуйста советы по коду, может быть что-то улучшить в плане кода.

html { 
  width: 100%; 
  height: 100%; 
} 
 
body, 
h1, 
h2, 
h3, 
h4, 
h5, 
h6, 
.h1, 
.h2, 
.h3, 
.h4, 
.h5, 
.h6 { 
    font-family: "Open Sans", Helvetica, Arial, sans-serif!important; 
} 
 
/* body:before { 
  content: ""; 
  display: block; 
  position: absolute; 
  left: 0; 
  right: 0; 
  top: 0; 
  bottom: 0; 
  z-index: -1; 
  transform-origin: center; 
  background-size: cover; 
} */ 
 
ul.nav { 
  position: relative; 
  left: 50%; 
  transform: translateX(-50%); 
  margin: 0; 
  height: 70px; 
} 
 
.navbar .navbar-nav { 
    display: inline-block; 
    float: none; 
} 
 
ul.nav li { 
    font-family: "Open Sans", Helvetica, Arial, sans-serif!important; 
    width: 140px; 
    margin-top: 10px; 
    display: inline; /* Отображать как строчный элемент */ 
    margin-right: 17px; /* Отступ слева */ 
    border: 1px solid #000; /* Рамка вокруг текста */ 
} 
 
ul.nav a:hover { 
  background-color: #49505F 
} 
 
ul.nav a { 
  height: 52px; 
  width: 140px; 
  margin-top: 5px; 
  text-align: center; 
  font-size: 20px; 
  /* line-height: 20px; */ 
  font-family: sans-serif; 
  text-decoration: none; 
  color: white; 
  display: inline-block; 
  padding: 10px 20px; 
  background-color: #383E4C; 
  border: 1px solid #646D7C; 
} 
 
.navbar { 
  background-color: #383E4C; 
  margin: 0; 
  height: 80px; 
} 
 
header {width: 100%; height: auto;} 
img { 
  display: block; 
  width: 100%; 
  height: 100%; 
} 
 
.title { 
  font-family: "Open Sans";; 
  color: #f0f0f0; /* Цвет текста, совпадает с цветом фона */ 
  text-shadow: #fff -1px -1px 0, 
              #333 2px 2px 0; 
  color: white; 
  text-align: center;; 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  font-size: 3.2em; 
  /* text-transform: uppercase; */ 
} 
 
.title h1 { 
  font-size: 70px; 
} 
 
.title h4 { 
  font-size: 25px; 
} 
 
.slide-content { 
  width: 100%; 
  position: absolute; 
} 
 
.col-sm-4 { 
  margin-top: 50px; 
  float: left; 
  display: inline-block; 
} 
 
.col-sm-6 { 
  margin-top: 50px; 
  display: inline-block; 
} 
 
.feature-content { 
  background-color: #F2F2F2; 
} 
 
.feature-area { 
  position: relative; 
} 
 
#blog-area { 
  margin: 60px 0px; 
  position: relative; 
} 
 
.blog-content { 
  background-color: #F2F2F2; 
 
}

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<meta http-equiv="X-UA-Compatible" content="ie=edge"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css"> 
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"> 
<link rel="stylesheet" href="css/style.css"> 
<title>Title</title> 
</head> 
<body> 
    <div class="header"> 
        <nav class="navbar"> 
          <ul class="nav navbar-nav"> 
            <li><a href="section1">Homepage</a></li> 
            <li><a href="section2">About Us</a></li> 
            <li><a href="section3">Services</a></li> 
            <li><a href="section4">Contact</a></li> 
            <li><a href="section5">External</a></li> 
          </ul> 
        </nav> 
      </div> 
      <div id="section1"> 
      <div class="col-sm-0"> 
        <div class="img"> 
          <img src="img/bg-1.jpg" alt=""> 
        </div> 
        <div class="title"> 
          <h1>CONQUER</h1> 
          <h4>Simple Bootstrap Template</h4> 
        </div> 
      </div> 
      </div> 
      <div id="section2"> 
      <section id="feature-area" class="about-section"> 
        <div class="col-sm-4"> 
          <div class="feature-content"> 
            <img src="img/1-1.jpg" alt="Image"> 
            <h2 class="feature-content-title green-text">Bootstrap v3.3.6</h2> 
            <p class="feature-content-description">Morbi sagittis justo a velit placerat ullamcorper quis quis velit. Sed convallis at risus ullamcorper auctor. Praesent quis velit neque. Quisque semper porta nisi vitae suscipit. Duis lectus magna, ornare ac scelerisque. 
            </p> 
            <a href="#" class="feature-content-link green-btn">button green</a> 
          </div> 
        </div> 
      <div class="col-sm-4"> 
        <div class="feature-content"> 
          <img src="img/1-2.jpg" alt="Image"> 
          <h2 class="feature-content-title blue-text">Responsive Design</h2> 
          <p class="feature-content-description">Conquer Template is provided by templatemo for free of charge. You can use this template for any kind of website. No credit link is required. All images by <a href="http://unsplash.com" target="_parent">Unsplash</a>. Thank you for visiting our website. Please come again!</p> 
          <a href="#" class="feature-content-link blue-btn">See Details</a> 
        </div> 
      </div> 
      <div class="col-sm-4"> 
        <div class="feature-content"> 
            <img src="img/1-3.jpg" alt="Image"> 
            <h2 class="feature-content-title red-text">Parallax Layout</h2> 
            <p class="feature-content-description">Morbi sagittis justo a velit placerat ullamcorper quis quis velit. Sed convallis at risus ullamcorper auctor. Praesent quis velit neque. Quisque semper porta nisi vitae suscipit. Duis lectus magna, ornare ac scelerisque. 
            </p> 
            <a href="#" class="feature-content-link red-btn">Button Red</a> 
          </div> 
        </div> 
      </section> 
      <section id="blog-area"> 
          <div class="container"> 
            <div class="row text-center inner"> 
              <div class="col-sm-6"> 
                <div class="blog-content"> 
                  <img src="img/2-1.jpg" alt="Image"> 
                  <h2>Two Column Left Side</h2> 
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempor eros eget eros maximus, ut cursus sem euismod. Donec iaculis tristique odio at consectetur. Nullam dignissim varius suscipit. Sed in leo sit amet velit finibus pretium.<br><br> 
                    Vestibulum vel mauris at erat mattis accumsan et ac lorem. Cras non venenatis orci, sed tincidunt massa. Duis nisl lectus, auctor eu sodales at, dignissim eu orci. Sed vitae venenatis magna, in blandit metus.</p> 
                    <br> 
 
                  </div> 
                </div> 
                <div class="col-sm-6"> 
                  <div class="blog-content"> 
                    <img src="img/2-2.jpg" alt="Image"> 
                    <h2>Two Column Right Side</h2> 
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempor eros eget eros maximus, ut cursus sem euismod. Donec iaculis tristique odio at consectetur. Nullam dignissim varius suscipit. Sed in leo sit amet velit finibus pretium.<br><br> 
                    Vestibulum vel mauris at erat mattis accumsan et ac lorem. Cras non venenatis orci, sed tincidunt massa. Duis nisl lectus, auctor eu sodales at, dignissim eu orci. Sed vitae venenatis magna, in blandit metus.</p> 
                      <span><a href="#">read more</a></span><br> 
                      <p id="blofr"></p> 
                    </div> 
                  </div> 
                </div> 
              </div> 
            </section> 
          </div> 
        </div> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script> 
</body> 
</html>

Answer 1

Раз уж Вы используете 4-й Бутстрап, не надо добавлять блокам float: left - просто оберните их в row, и всё заработает:

body, 
h1, 
h2, 
h3, 
h4, 
h5, 
h6, 
.h1, 
.h2, 
.h3, 
.h4, 
.h5, 
.h6 { 
    font-family: "Open Sans", Helvetica, Arial, sans-serif!important; 
} 
 
/* body:before { 
  content: ""; 
  display: block; 
  position: absolute; 
  left: 0; 
  right: 0; 
  top: 0; 
  bottom: 0; 
  z-index: -1; 
  transform-origin: center; 
  background-size: cover; 
} */ 
 
ul.nav { 
  position: relative; 
  left: 50%; 
  transform: translateX(-50%); 
  margin: 0; 
  height: 70px; 
} 
 
.navbar .navbar-nav { 
    display: inline-block; 
    float: none; 
} 
 
ul.nav li { 
    font-family: "Open Sans", Helvetica, Arial, sans-serif!important; 
    width: 140px; 
    margin-top: 10px; 
    display: inline; /* Отображать как строчный элемент */ 
    margin-right: 17px; /* Отступ слева */ 
    border: 1px solid #000; /* Рамка вокруг текста */ 
} 
 
ul.nav a:hover { 
  background-color: #49505F; 
} 
 
ul.nav a { 
  height: 52px; 
  width: 140px; 
  margin-top: 5px; 
  text-align: center; 
  font-size: 20px; 
  /* line-height: 20px; */ 
  font-family: sans-serif; 
  text-decoration: none; 
  color: white; 
  display: inline-block; 
  padding: 10px 20px; 
  background-color: #383E4C; 
  border: 1px solid #646D7C; 
} 
 
.navbar { 
  background-color: #383E4C; 
  margin: 0; 
  height: 80px; 
} 
 
header {width: 100%; height: auto;} 
img { 
  display: block; 
  width: 100%; 
  height: 100%; 
} 
 
.title { 
  font-family: "Open Sans"; 
  color: #f0f0f0; /* Цвет текста, совпадает с цветом фона */ 
  text-shadow: #fff -1px -1px 0, 
              #333 2px 2px 0; 
  color: white; 
  text-align: center; 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  font-size: 3.2em; 
  /* text-transform: uppercase; */ 
} 
 
.title h1 { 
  font-size: 70px; 
} 
 
.title h4 { 
  font-size: 25px; 
} 
 
.slide-content { 
  width: 100%; 
  position: absolute; 
} 
 
.col-sm-4 { 
  margin-top: 50px; 
  display: inline-block; 
} 
 
.col-sm-6 { 
  margin-top: 50px; 
  display: inline-block; 
} 
 
.feature-content { 
  background-color: #F2F2F2; 
} 
 
.feature-area { 
  position: relative; 
} 
 
#blog-area { 
  margin: 60px 0px; 
  position: relative; 
} 
 
.blog-content { 
  background-color: #F2F2F2; 
}

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<meta http-equiv="X-UA-Compatible" content="ie=edge"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css"> 
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"> 
<link rel="stylesheet" href="css/style.css"> 
<title>Title</title> 
</head> 
<body> 
    <div class="header"> 
        <nav class="navbar"> 
          <ul class="nav navbar-nav"> 
            <li><a href="section1">Homepage</a></li> 
            <li><a href="section2">About Us</a></li> 
            <li><a href="section3">Services</a></li> 
            <li><a href="section4">Contact</a></li> 
            <li><a href="section5">External</a></li> 
          </ul> 
        </nav> 
      </div> 
      <div id="section1"> 
      <div class="col-sm-0"> 
        <div class="img"> 
          <img src="img/bg-1.jpg" alt=""> 
        </div> 
        <div class="title"> 
          <h1>CONQUER</h1> 
          <h4>Simple Bootstrap Template</h4> 
        </div> 
      </div> 
      </div> 
      <div id="section2"> 
      <section id="feature-area" class="about-section"> 
      <div class="row"> 
      
        <div class="col-sm-4"> 
          <div class="feature-content"> 
            <img src="img/1-1.jpg" alt="Image"> 
            <h2 class="feature-content-title green-text">Bootstrap v3.3.6</h2> 
            <p class="feature-content-description">Morbi sagittis justo a velit placerat ullamcorper quis quis velit. Sed convallis at risus ullamcorper auctor. Praesent quis velit neque. Quisque semper porta nisi vitae suscipit. Duis lectus magna, ornare ac scelerisque. 
            </p> 
            <a href="#" class="feature-content-link green-btn">button green</a> 
          </div> 
        </div> 
         
      <div class="col-sm-4"> 
        <div class="feature-content"> 
          <img src="img/1-2.jpg" alt="Image"> 
          <h2 class="feature-content-title blue-text">Responsive Design</h2> 
          <p class="feature-content-description">Conquer Template is provided by templatemo for free of charge. You can use this template for any kind of website. No credit link is required. All images by <a href="http://unsplash.com" target="_parent">Unsplash</a>. Thank you for visiting our website. Please come again!</p> 
          <a href="#" class="feature-content-link blue-btn">See Details</a> 
        </div> 
      </div> 
       
      <div class="col-sm-4"> 
        <div class="feature-content"> 
            <img src="img/1-3.jpg" alt="Image"> 
            <h2 class="feature-content-title red-text">Parallax Layout</h2> 
            <p class="feature-content-description">Morbi sagittis justo a velit placerat ullamcorper quis quis velit. Sed convallis at risus ullamcorper auctor. Praesent quis velit neque. Quisque semper porta nisi vitae suscipit. Duis lectus magna, ornare ac scelerisque. 
            </p> 
            <a href="#" class="feature-content-link red-btn">Button Red</a> 
          </div> 
        </div> 
        </div> 
      </section> 
      <section id="blog-area"> 
          <div class="container"> 
            <div class="row text-center inner"> 
              <div class="col-sm-6"> 
                <div class="blog-content"> 
                  <img src="img/2-1.jpg" alt="Image"> 
                  <h2>Two Column Left Side</h2> 
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempor eros eget eros maximus, ut cursus sem euismod. Donec iaculis tristique odio at consectetur. Nullam dignissim varius suscipit. Sed in leo sit amet velit finibus pretium.<br><br> 
                    Vestibulum vel mauris at erat mattis accumsan et ac lorem. Cras non venenatis orci, sed tincidunt massa. Duis nisl lectus, auctor eu sodales at, dignissim eu orci. Sed vitae venenatis magna, in blandit metus.</p> 
                    <br> 
 
                  </div> 
                </div> 
                <div class="col-sm-6"> 
                  <div class="blog-content"> 
                    <img src="img/2-2.jpg" alt="Image"> 
                    <h2>Two Column Right Side</h2> 
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempor eros eget eros maximus, ut cursus sem euismod. Donec iaculis tristique odio at consectetur. Nullam dignissim varius suscipit. Sed in leo sit amet velit finibus pretium.<br><br> 
                    Vestibulum vel mauris at erat mattis accumsan et ac lorem. Cras non venenatis orci, sed tincidunt massa. Duis nisl lectus, auctor eu sodales at, dignissim eu orci. Sed vitae venenatis magna, in blandit metus.</p> 
                      <span><a href="#">read more</a></span><br> 
                      <p id="blofr"></p> 
                    </div> 
                  </div> 
                </div> 
              </div> 
            </section> 
          </div> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script> 
</body> 
</html>

Создание интернет-магазина игрушек в ABCname

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

21:33

Виртуальный выделенный сервер (VDS) становится отличным выбором
22:26
22:40

Создание игр для детей: первые шаги в IT мире
08:34
15:01

Основные задачи SEO оптимизатора
17:01
11:24

Выделенный сервер для игр: преимущества и недостатки
10:16
17:54

Все вопросы

ТОП-10

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

Кастомная ошибка в HTML

Недавно, мой приятель сделал сайт, но, когда проверяешь его в Check-Host (HTTP) — показывает "Ошибка сервера" и ошибку "666 (рандом текст)При этом всём,...

151

HTML

Textarea и Contenteditable - в чем разница? И почему selectionStart, selectionEnd не работают со вторым?

Пытаюсь сделать личный HTML-редакторС textarea всё работает как надо: (CodePen-1) Если ничего не выделено - теги добавляются просто в конце напечатанного...

180

jQuery

Нумерация с единицы

Подскажите пожалуйста как сделать нумерацию не с 0 а с 1?

112

jQuery

Заменить значение background-image в style

Вообщем суть такаяВ скрипте слайдер выводит информацию так:

146