Простая компоновка в 2 столбца

#css #multiple-columns

#css #многоколоночный

Вопрос:

Я хотел бы иметь веб-страницу с двумя столбцами. Первый для кнопок, а второй для содержимого.

Вот JsFiddle :

HTML:

 <div data-role="page" data-theme="b" id="home">
<div data-role="header" data-position="fixed">
    <div class="home-header">
        <div class="content-header" data-tap-toggle="false">
            Header
        </div>
    </div>  
</div> 
<div data-role="content">
    <div>
        <div class="ActionsMenu">       
            <button>button</button>
            <button>button</button>
            <button>button</button>
            <button>button</button>
        </div>

        <div id="ActionsContent">
            <h3 class="ui-bar ui-bar-a ui-corner-all">Heading</h3>
      <div class="ui-body">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan blandit fermentum. Pellentesque cursus mauris purus, auctor commodo mi ullamcorper nec. Donec semper mattis eros, nec condimentum ante sollicitudin quis. Etiam orci sem, porttitor ut tellus nec, blandit posuere urna. Proin a arcu non lacus pretium faucibus. Aliquam sed est porttitor, ullamcorper urna nec, vehicula lorem. Cras porttitor est lorem, non venenatis diam convallis congue.</p>
      </div>
        </div>
    </div>
</div>

<div data-role="footer" data-position="fixed" data-tap-toggle="false">
    footer
</div>
  

CSS:

 .ActionsMenu {
    width: 100%;
    float: none;
}
.ActionsContent {
    width: 100%;
    float: none;
}

@media all and (min-width: 400px) {
    .ActionsMenu {
      float: left;
      width: 25%;
      padding-right: 50px;

    }
    .ActionsContent {
      float: none;
      margin-left: 25%;
    }
}
  

Как вы можете видеть, содержимое находится под кнопками, а не там, где мне это нужно…

Страница также должна быть адаптивной и отображать один столбец для мобильных устройств…

Ответ №1:

ДЕМОНСТРАЦИЯ

Для обоих разделов определена предельная ширина.

Поскольку вы собираетесь использовать адаптивный дизайн, я предлагаю использовать % widths

 .MainContent .ActionsMenu {
    width: 25%;
    float: none;
    overflow-scrolling: auto;
}
.MainContent .ActionsContent {
    width: 60%;
    float: right;
}
  

Есть элемент float для правильного размещения содержимого

И у вас должен быть идентификатор ActionsMenu в HTML, а не класс.

 <div class="ActionsMenu"> ..</div>
  

Редактировать:
Вы хотите выровнять по правому краю-http://jsfiddle.net/VT9m3/11 / добавьте отступы на основе этого

 .ActionsContent {
      float: left;
        width:65%;
    padding-left:20px;
    }
  

но поскольку ваше заполнение в одном и том же div может прерваться при возврате, если ширина .ActionsMenu .Actionscontent padding >100% so имеет меню действий в другом div и имеет свойство width для него, тогда есть .ActionContent и имеют заполнение

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

1. Спасибо! Что, если я хочу, чтобы содержимое было выровнено не по правому краю, а по левому, оставляя только пробел между кнопками и содержимым?

2. Предпочтительнее использовать другой div с заполнением внутри плавающего div, чтобы избежать нарушения дизайна. Это лучше вместо того, чтобы применять padding и float к одному и тому же div.

3. Вы хотите выровнять по правому краю- jsfiddle.net/VT9m3/11 добавьте отступы на основе этого. ActionsContent { float: слева; ширина: 65%; отступ слева: 20 пикселей; }

Ответ №2:

Пожалуйста, замените эти строки CSS

 .ActionsMenu {
    width: 25%;
    float: left;
    overflow-scrolling: auto;
}
#ActionsContent {
    width: 60%;
    float: right;
}
  

Ответ №3:

Вы используете селектор класса для выбора идентификатора. Либо замена id="ActionsContent" на class="ActionsContent" , либо замена .ActionsContent на #ActionsContent должны убедиться, что стили действительно применяются 😉