Блог

Главная - Вопросы по программированию - Настройка текста с правой стороны с помощью CSS

Настройка текста с правой стороны с помощью CSS

#html #css

Вопрос:

Мне нужно сделать веб-страницу заказа еды. В левой части определена навигация, а в центре есть цитата из строки тега, написанная на

класс div=»main_content»

который будет находиться в центре веб-страницы и в

класс div=»правильно»

есть еще несколько строк, написанных справа вверх, как карточки людей в поиске Google.

Помогите мне настроить его с помощью CSS. Ниже приведен мой Html и CSS код.

 @import url('https://fonts.googleapis.com/css?family=Josefin Sansamp;display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  font-family: 'Josefin Sans', sans-serif;
}

body {
  background-color: #f3f5f9;
}

.wrapper {
  display: flex;
  position: relative;
}

.wrapper .sidebar {
  width: 200px;
  height: 100%;
  background: #FDFDFB;
  padding: 30px 0px;
  position: fixed;
}

.wrapper .sidebar h2 {
  color: rgb(82, 17, 17);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 50px;
}

.wrapper .sidebar ul li {
  padding: 15px;
  border-bottom: 1px solid #bdb8d7;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.wrapper .sidebar ul li a {
  color: #bdb8d7;
  display: block;
}

.wrapper .sidebar ul li a .fas {
  width: 25px;
}

.wrapper .sidebar ul li:hover {
  background-color: #594f8d;
}

.wrapper .sidebar ul li:hover a {
  color: #fff;
}

.wrapper .main_content {
  width: 100%;
  margin-left: 200px;
}

.wrapper .main_content .header {
  padding: 20px;
  background: #fff;
  color: #717171;
  border-bottom: 1px solid #e0e4e8;
}

.wrapper .main_content .info {
  margin: 20px;
  color: #717171;
  line-height: 25px;
}

.wrapper .main_content .info div {
  margin-bottom: 20px;
}

.right {
  width: 48%;
  float: left;
  padding: 10%;
} 
 <div class="wrapper">
  <div class="sidebar">
    <h2>Loren<br>Ipsum</h2>
    <ul>
      <li><a href="#"><i class="fas fa-about"></i>About</a></li>
      <li><a href="#"><i class="fas fa-service"></i>Service</a></li>
      <li><a href="#"><i class="fas fa-cuisine"></i>Cuisine</a></li>
      <li><a href="#"><i class="fas fa-gallery"></i>Gallery</a></li>
      <li><a href="#"><i class="fas fa-contact"></i>Contact</a></li>
      <li><a href="#"><i class="fas fa-book"></i>Book</a></li>
    </ul>
    <br>
    <br>
    <input type="submit" value="Cart">
  </div>


  <div class="main_content">
    <div class="info"> What are you having for Lunch?</div>

    <div class="right"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod incidunt ut laoreet et</div>
  </div>
</div>

Комментарии:

1. Совершенно непонятно, в чем ваша проблема.

2.Удалите поплавок , вам лучше использовать flex поле .. дайте info flex:1 , чтобы занять максимальное доступное пространство .. у родителя main_content должно быть display: flex .

3. Хоссам, как настроить div class=»информация» в правильное относительное положение?

Ответ №1:

Заверните div в контейнер div и отрегулируйте его так, чтобы он плавал справа или слева. Убедитесь, что ширина div установлена на 100%.

Метки: