Jump to content

Разбить страницу на две колонки


s.brume
 Share

Recommended Posts

Добрый день. Работаю с готовым макетом, не могу поправить страницу так, чтобы текст был разбит на две колонки. Помогите, пожалуйста.

Юзал вот что:

<style type="text/css">                * { margin: 0; padding: 0; }            p { padding: 10px; }            #left { position: absolute; left: 0; top: 0; width: 50%; }            #right { position: absolute; right: 0; top: 0; width: 50%; }         </style>

- хотя говорят, что это совсем не оптимальный вариант... Другого не знаю.

В общем, так или иначе текст плывёт - то мимо блока, то наезжает на всё. Игрался с absolute, fixed и т.д. - не помогает, никак не могу попасть в нужное место. Страницу с кодом и картинку примерной разметки прилагаю. Задача простая: текст в теле должен быть двухколоночным. Если нужен CSS, приложу.

Спасибо.

contacts.html

12321.png

Link to comment
Share on other sites

 Если на две колонки надо разбить только текст, то есть свойство column-count. 

Можно настроить количество колонок, отступ между ними, полоску при желании добавить.

https://www.w3schools.com/css/css3_multiple_columns.asp

https://developer.mozilla.org/ru/docs/Web/Guide/CSS/Using_multi-column_layouts

А в целом, создать две колонки можно можно разными способами (через float, flex, grid...), в зависимости от задачи. Лучше пришлите ссылку на сайт или покажите весь код.

Edited by Svetlana_P
  • Like 1
Link to comment
Share on other sites

11 минуту назад, Svetlana_P сказал:

 Лучше пришлите ссылку на сайт или покажите весь код.

Спасибо за Ваш пост, всё весьма подробно описано. Я просто новичок в HTML, поэтому не всё знаю.

Сайт следующий: http://xn--d1abbkoltceo5b8f.xn--p1ai/contacts.html - и нужно на этой странице сделать две колонки (два адреса, две карты Яндекс).

Основной блок имеет свойство перехода на новую строку или что-то подобное... потому что даже рядом добавить элементы (карты, картинки) у меня не вышло - они всё время будто с <br>, не понимаю(

Link to comment
Share on other sites

Посмотрела сайт. Он ведь на Bootstrap сделан. Это фреймворк такой, почитайте про его сетку. Там уже реализованы колонки.

В текущем коде перед контактами я вижу уже кто-то описал две колонки — два дива с классом col-lg-6 внутри дива row. Задайте такую же разметку для контактов. Поставьте нужный контент в эти колонки, и не надо ничего самому придумывать. Т.е. структура такая будет:

<div class="row">
  <div class="col-lg-6">
     Здесь контакты номер один
  </div>
  <div class="col-lg-6">
     Здесь контакты номер два
  </div>
</div>

Дополнила: вот скрин, всё встает как надо 14650609.jpg

Edited by Svetlana_P
Link to comment
Share on other sites

8 часов назад, Svetlana_P сказал:

column-count. 

я много раз замечал, что это свойство часто криво работает со строчным содержимым.   поэтому не использую вообще его.   лучше действительно col-md, col-lg и т д

  • Like 1
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By WNSY
      Более опытные товарищи, ай нид ё хелп!)
      Имеется выпадающее меню с классом .sub-menu__list. При наведении оно выпадает, но перекрывается блоком .page__main. Для наглядности прикрепляю скрин и код.
      Естественно, нужно, чтобы выпадающее меню было поверх контента следующего блока.
      Подскажите, как это реализовать?
      P.S. Если нужно поиграть с z-index, подскажите в каком классе, т.к. я перепробовал свои варианты - результата не дало.

       
      HTML
      <header class="header"> <div class="header__all _container"> <div class="header__image"> </div> </div> <div class="header__container _container"> <a href="#" class="header__logo"><img src="img/SL-logo.png" alt="SL"></a> <nav class="header__menu menu"> <ul class="menu__list"> <li class="menu__item"> <a href="#" class="menu__link">Главная</a> </li> <li class="menu__item"> <a href="#" class="menu__link">Обучение</a> <ul class="sub-menu__list"> <li class="sub-menu__item"><a href="#" class="sub-menu__link">Направления</a></li> <li class="sub-menu__item"><a href="#" class="sub-menu__link">Стоимость</a></li> <li class="sub-menu__item"><a href="#" class="sub-menu__link">Расписание</a></li> </ul> </li> <li class="menu__item"> <a href="#" class="menu__link">О нас</a> </li> <li class="menu__item"> <a href="#" class="menu__link">Контакты</a> </li> <li class="menu__item"> <a href="#" class="menu__link">Доп.услуги</a> </li> </ul> </nav> <a href="#" class="header__phone"><img src="img/header-phone.png" alt="h-phone"></a> </div> </header> <main class="page"> <div class="page__container _container"> <div class="page__main"></div> CSS
      .header { } .header__all + ._container { position: relative; } .header__image { background: grey; background-size: cover; height: 302px; font-size: 48px; text-align: center; } /*=======================================HEADER-NAV=======================================*/ .header__container { display: flex; min-height: 110px; align-items: center; margin: 15px auto 0 auto; position: absolute; } .header__logo { } .header__menu { margin: 0 0 0 95px; } .menu { } .menu__list { display: flex; } .menu__item { position: relative; } .menu__item:not(:last-child) { margin: 0 68px 0 0; } .menu__link { font-size: 20px; } .header__phone { margin: 0 0 0 175px; } /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~SUB-MENU~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ .sub-menu__list { display: none; position: absolute; } .sub-menu__item { width: 204px; } .sub-menu__item:first-child { padding: 40px 0 0 0; } .sub-menu__link { font-size: 18px; max-width: 204px; } .sub-menu__item:not(:last-child) { margin: 0 0 22px 0; } .menu__item:hover .sub-menu__list { display: block; } /*=======================================MAIN=======================================*/ .page { } .page__container { } .page__main { background: rgba(203, 32, 218, 0.25); height: 300px; font-size: 48px; text-align: center; }  
    • By KatiaBeing
      Подскажите пожалуйста, как правильно сделать кастомный список стран используя API.
      Вот fetch код:
       
      const countryList = document.querySelector('.form-list.country'); fetch('https://restcountries.com/v3.1/all').then(res => { return res.json(); }).then(data => { let output = ''; data.forEach(country => { output += `<li class="form-item" data-value="${country.name.common}">${country.name.common}</li>`; countryList.innerHTML = output; }); }).catch(err => { console.log(err); }); полный код html, css, js Во втором списке "Country" список формируется, но название страны не поставляется в форму, а атрибут "data-value="" " в инпут ниже. В первом списке "Guests Amount" все ок, т.к. данные прописаны в html. Нужен такой же, но со странами.
      Сразу скажу, с тегом select все работает, но мне нужна стилизованная выпадашка. Заранее спасибо.
    • By noob_saibot
      Здравствуйте!
      http://unbrokenteam.ru/
      Как переместить кнопку на ту же вертикальную линию, что и поля для ввода?
      Вот как сейчас
      Вот как должно быть
      Я использую этот класс для кнопки в style.css
      .noTableBorder-button { left: 0; margin-left: 0; transform: none; display: block; } index.html
      style.css
       
    • By Ilya983
      Помогите сделать минимальную макет с header, footer, LeftMenu, Content, RightMenu на Bootstrap 4-5.
      Ширина LeftMenu + Content + RightMenu аналогична ширине основного блока текущего сайта(htmlforum.io).
      Другими словами не на всю ширину браузера, а по центру. Может для ширины таких элементов имеется какая-то практика?
      LeftMenu - привязано к левому краю контейнера. 
      RightMenu - привязано к правому краю контейнера. 
      Для примера...
      Пробую, всё скачет...
      https://jsfiddle.net/User65659/0jxt7qLg/45/
      Аналог на картинке
       

    • By Young
      Столкнулся с проблемой , когда вставил картинку , весь текст съехал в лево , а сама картинка , должна находиться с низу сайта
      И еще вопрос , как сделать так , чтобы когда я уменьшал размер сайта , облаки оставались на своих местах ?
      HTML
      CSS
       

      решено 
  • Обсуждения

    • .tabs>input[type="radio"]:checked+label {   background-color: #fff;   border-bottom: 1px solid #fff; } Здесь и делаете стили для изменения нажатого таба если я правильно понял
    • все файлы должны быть в одной папке некоторые ссылки ссылаются на локальный компьютер - этого не должно быть некоторые маленькие картинки грузят очень большие файлы перепутанные ссылки - это скорее всего ваша ошибка
    • Здравствуйте! Уважаемые форумчане! Я начинающий начинать) прошу помощи,  есть макет сайта , хочу чтоб на главной странице были вкладки которые бы переключались по нажатию кнопки. но основной вопрос в том как сделать их разными. пример приведу в фото. Хочу как на фото сделать но незнаю как( а так же код выглядит таким образом      <div class="tabs">              <input type="radio" name="tab-btn" id="tab-btn-1" value="">              <label for="tab-btn-1">Свадьба</label>              <input type="radio" name="tab-btn" id="tab-btn-2" value="">              <label for="tab-btn-2">Мужу</label>              <input type="radio" name="tab-btn" id="tab-btn-3" value="">              <label for="tab-btn-3">Жене</label>              <input type="radio" name="tab-btn" id="tab-btn-4" value="">              <label for="tab-btn-4">Партнеру</label>              <input type="radio" name="tab-btn" id="tab-btn-5" value="">              <label for="tab-btn-5">Коллекции</label>              <input type="radio" name="tab-btn" id="tab-btn-6" value="">              <label for="tab-btn-6">Редкость</label>                            <div id="content-1">                <img src="images/Kolca1.png" alt="Кольца" class="kolca">                <p class="kolca11">Кольца</p>              </div>              <div id="content-2">                Содержимое 2              </div>              <div id="content-3">                Содержимое 3              </div>              <div id="content-4">                Содержимое 4              </div>              <div id="content-5">                Содержимое 5              </div>              <div id="content-6">                Содержимое 6              </div>     </div>   CSS code .tabs {   top: 1100px;   position: absolute;   left: 600px;   font-size: 50px; } .tabs>input[type="radio"] {   display: none; }   .tabs>div {   /* скрыть контент по умолчанию */   display: none;   border: 1px solid #e0e0e0;   padding: 10px 15px;   font-size: 16px; }   /* отобразить контент, связанный с вабранной радиокнопкой (input type="radio") */ #tab-btn-1:checked~#content-1, #tab-btn-2:checked~#content-2, #tab-btn-3:checked~#content-3, #tab-btn-4:checked~#content-4, #tab-btn-5:checked~#content-5, #tab-btn-6:checked~#content-6{   display: block; }   .tabs>label {   display: inline-block;   text-align: center;   vertical-align: middle;   user-select: none;   background-color: #f5f5f5;   border: 1px solid #e0e0e0;   padding: 2px 8px;   font-size: 16px;   line-height: 1.5;   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;   cursor: pointer;   position: relative;   top: 1px;     font-family: 'Gilroy';   font-style: normal;   font-weight: 500;   font-size: 18px;   line-height: 21px;   text-align: center;   letter-spacing: 0.1em;   text-transform: uppercase; }   .tabs>label:not(:first-of-type) {   border-left: none; }   .tabs>input[type="radio"]:checked+label {   background-color: #fff;   border-bottom: 1px solid #fff; }  
    • Сегодня index.html неожиданно начал загружаться, но некорректно. Ссылки на веб-страницы не работают, но я думаю, что я сама указала неправильный путь к файлам, сегодня буду это исправлять. Ещё почему-то отображаются не все иллюстрации, а те что отображаются - все перепутаны. Пробовала открывать иллюстрации на самом сервере, но и там почему-то название картинки одно, а картинка совсем другая. Адрес сайта http://j90365fr.beget.tech/  
    • адрес сайта можно по какому адресу грузится css?  
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy