Ширина блока: Высота и ширина блока | CSS

Leave a Comment / Разное / By /

Содержание

html — Ширину блока по размеру содержимого (блок скролится)

Задать вопрос

Вопрос задан

Изменён 9 месяцев назад

Просмотрен 59 раз

Красный блок ограничен. Мне нужно, чтобы он растягивался от содержимого независимо от того, что он скролящийся. В примере я бы хотел, чтобы зеленые блоки не вылазили за красный. Нужно, чтобы красный растягивался от зелёных.

* {
  box-sizing: border-box;
}
.main {
  width: 100%;
  height: 100vh;
  background-color: lightgreen;
  display: flex;
  flex-direction: row;
}
.left {
  min-width: 100px;
  height: 100%;
  
  border: 5px solid black;
  padding: 10px;
}
.right {
  overflow-y: auto;
  height: 100%;
  border: 5px dashed black;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.
 
 right__parent {
  height: 40px;
  border: 2px solid red;
  display: flex;
  flex-direction: row;
}
.right__child {
  width: 300px;
  height: 100%;
  border: 2px solid green;
  flex-shrink: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  
</head>
<body>
  <div>
    <div>
      left
    </div>
    <div>
      <div>
        <div>right__child</div>
        <div>right__child</div>
        <div>right__child</div>
        <div>right__child</div>
        <div>right__child</div>
        <div>right__child</div>
        <div>right__child</div>
        
      </div>
      <div>
        
      </div>
      <div>
        
      </div>
      <div>
        
      </div>
    </div>
  </div>
</body>
</html>
  • html
  • css
  • flexbox
  • scroll

0

Вот, думаю так нужно Вам.

 * {
  box-sizing: border-box;
}
.main {
  width: 100%;
  height: 100vh;
  background-color: lightgreen;
  display: flex;
  flex-direction: row;
}
.left {
  min-width: 100px;
  height: 100%;
  
  border: 5px solid black;
  padding: 10px;
}
.right {
  overflow-y: auto;
  width: 100%;
  height: 100%;
  border: 5px dashed black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-wrap: wrap;
}
.right__parent {
  height: 40px;
  border: 2px solid red;
  display: flex;
  flex-direction: row;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  
</head>
<body>
  <div>
    <div>
      left
    </div>
    <div>
      <div>
        <div>right__child</div>
        <div>right__child</div>
        <div>right__child</div>
        <div>right__child</div>
        <div>right__child</div>
        <div>right__child</div>
        <div>right__child</div>
        <div>right__child</div>
        <div>right__child</div>
        <div>right__child</div>
        <div>right__child</div>
        <div>right__child</div>
        <div>right__child</div>
        <div>right__child</div>
        
        <div>right__child</div>
        <div>right__child</div>
        <div>right__child</div>
        <div>right__child</div>
        <div>right__child</div>
        <div>right__child</div>
        <div>right__child</div>
        <div>right__child</div>
        <div>right__child</div>
        <div>right__child</div>
        <div>right__child</div>
        <div>right__child</div>
        <div>right__child</div>
        <div>right__child</div>
      </div>
      <div>
        
      </div>
      <div>
        
      </div>
      <div>
        
      </div>
    </div>
  </div>
</body>
</html>

1

Добавь классу . right свойство {flex-shrink: 0}

6

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Основы адаптивного дизайна / Habr

В этой статье я попытаюсь рассказать, как сделать простой шаблон адаптивным. И, конечно же, я попытаюсь объяснить, что такое адаптивный дизайн.

Что такое адаптивный дизайн?

Я уверен, что вы часто «серфите» по сайтам с мобильных устройств и не раз замечали, что есть сайты, где надо масштабировать страницу, чтобы прочитать текст. А бывает, что еще хуже — текст может не поместится на всю страницу и вам придется крутить страницу и по горизонтали, и по вертикали.

Зайдя на сайт с адаптивным шаблоном все меняется, ибо текст «подстраивается» под ваш телефон (разрешение экрана).

Теория (основы)

Думаю, всем известно, что все шаблоны (их стиль) построен на CSS. И адаптивный дизайн — не исключение. Наиболее важное изменение — изменение единиц измерения. Представим, ширина блока 400 пикселей, а значит, что ее надо указывать в процентах (например, 40%).

max-width и width

Тоже очень важная часть в дизайне. Например, ширина нашего сайта 1000 пикселей, но при изменение окна (по ширине, меньше 1000 пикселей), появится горизонтальная прокрутка. Но все поменяется, если мы укажем width: 100%, ибо сайт будет «подстраиваться» под наш экран.

С большими мониторами не так все просто, поскольку текст растянется на весь экран. А получается, если монитор широкоформатный, то текст будет нечитабельным.

Если вам нужно, чтобы сайт остался с такой же шириной, но при этом остался «адаптивным» — надо изменить CSS-код, как указано ниже.

Было

width: 1000px;

Стало

width: 100%;
max-width: 1000px;
min-width и width

Если чуть выше мы ставили максимальную ширину, то здесь мы устанавливаем минимальную ширину. К примеру, если установить минимальную ширину 200 пикселей, то окно браузера достигает этой ширины и оно больше не будет уменьшаться (появится горизонтальная прокрутка).

Практика

Шаблон, который будет выступать в качестве демонострации, будет иметь в себе три составляющих: шапка, основной контент и боковая колонка (сайтбар).

  • Шапка — #headerInner
  • Основной контент — #colLeft
  • Боковая колонка — #colRight

Проверить адаптивность шаблона можно с помощью масштабирования окна (см. скриншот).

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Адаптивный шаблон</title>
</head>
<body>
<div>
  <div>
     <a href="http://bifot.ru/blog/">Логотип</a>
  </div>
</div>
<!-- начало wrapper -->
<div>
   <div>
       <div>
          <div>
              <div>
                   <h2>Основной контент</h2>
                   <p>Здесь будет находится основной контент страницы</p>
              </div>
          </div><!-- конец colLeft -->
          <!-- начало colRight -->
          <div>
              <div>
                   <h2>Текст сайтбара</h2>
                   <p>Содержимое сайтбара</p>
              </div>
          </div><!-- конец colRight -->
       </div><!-- конец content -->
   </div><!-- конец middle -->
</div><!-- конец wrapper -->
</body>
</html>

CSS

* {
 margin: 0;
 padding: 0;
}
 
body {
 width: 100%;
 height: 100%;
 color:#333;
 background: url(images/body. png) 0px 0px repeat;
 font-family: "Segoe UI", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
 font-size:0.94em;
 line-height:135%;
}
 
h2 {
 font-size:30px;
 font-weight:normal;
 padding:0px 0 0px;
 line-height:100%;
 font-style:italic;
}
 
a {
 color: #cd5252;
 text-decoration:none;
}
 
a:hover {
 color:#963c3c;
 text-decoration: none;
}
 
/* -------------------------------
 Структура
 ----------------------------------*/
 
/* -------------------------------
 Ширина сайта в 1000px
 ----------------------------------*/
 
#wrapper {
 margin-top:40px;
 border:0px solid #000;
 width: 100%;
 max-width:1000px;
 margin: 0 auto;
 height: auto !important;
}
 
/* -------------------------------
 Шапка сайта
 ----------------------------------*/
 
#headerInner {
 border: 0px solid #000;
 background: #d04942;
 position:relative;
 width:100%;
 max-width:1000px;
 height:100px;
 margin:0 auto;
 margin-top:0px;
}
 
.text {
 margin:15px;
 
}
 
/* -------------------------------
 Главный контент
 ----------------------------------*/
 
#content #colLeft {
 
border: 0px solid #000;
 float:left;
 width:67%;
 margin-right:0px;
 background: #85c9cf;
}
 
/* -------------------------------
 Сайтбар сайта
 ----------------------------------*/
 
#content #colRight {
 position:relative;
 margin-left:30px;
 float:left;
 width:30%;
 border: 0px solid #1FA2E1;
 background: #7a9e0e;
}
 
#middle:after {
 content: '.
 
 ';
 display: block;
 clear: both;
 visibility: hidden;
 height: 0;
}
 
/*----------------------------
 Логотип
 ------------------------------*/
 
.logo {
 position:absolute;
 left:0px;
 top:40px;
}
 
.logo a {
 margin-left:30px;
 font-size:30px;
 color:#96b551;
}

Как вы заметили, ширина шаблона 1000 пикселей. В шаблоне используется width и max-width: о них написано выше.

У шапки ширина все таже — 1000 пикселей. У основного контента (#colLeft) ширина 67%, а у правой колонки — 30%. Отступ между ними 30 пикселей (3%).

Использование media screen

Стоит отметить, что в media screen задается нужное разрешение экрана устройства. Их очень много, можно указывать даже свои, но самые популярные: 320px, 480px, 600px, 768px, 1024px. В моем примере используется два разрешения: 768px и 1024px.

Таким образом выглядит тег media screen в CSS

@media screen and (min-width:200px) and (max-width:1024px) {
}

Как можно увидеть, мы используем максимальную ширину — 1024px. Данное свойство будет предаваться только тогда, когда ширина окна будет меньше 1024 пикселей.

1024 пикселя

Допустим, что наша цель — чуть-чуть сузить шаблон при этом разрешении, но основной контент и сайтбар должны оставаться на месте.

Вот, что необходимо прописать в CSS

@media screen and (min-width:100px) and (max-width:1024px) {
/* размер блока, где находятся главный контент и сайтбар*/
body #wrapper {
 margin-top:40px;
 width: 90%;
 margin: 0 auto;
}
/* размер шапки сайта*/
body #headerInner {
 width:90%;
 margin:0 auto;
}
 
/* размер главного контента*/
#wrapper #content #colLeft {
 width:67%;
}
 
/* размер сайтбара*/
 
#wrapper #content #colRight {
 margin-left:3%;
 width:30%;
}
} /* скобка, закрывающая тег @media screen

Шапка сайта (#headerInner) имеет новый размер в 90%. Стоит отметить, что для шапки мы не используем max-width, ибо он здесь не нужен. #wrapper — блок, в котором находится основной контент и сайтбар, его ширина тоже 90%. Ширина и сайтбара, и основного контента остаются неизменными, изменился лишь отступ у сайтбара (3%). Это используется для того, чтобы при уменьшение окна сайтбар не «падал» вниз.

768px

Теперь мы пишем настройки для окон, ширина которых 768 пикселей и меньше. Сейчас мы будем распологать сайтбар под основным контентом.

@media screen and (min-width:100px) and (max-width:768px) {
 #wrapper #colLeft {
  float:none;
  width:100%;
  margin-right:0px;
 }
 #wrapper #colRight {
  margin-left:0px;
  margin-top:25px;
  float:none;
  width:100%;
 }
}

Для блока основного контента (#colLeft) мы указали ширину 100%, чтобы блок растянулся на весь экран. Также мы убрали выравнивание по левому краю, указав float: none, чтобы сайтбар (#colRight) «уплыл» под основной блок контента.

Для сайтбара ширина та же, а выравнивание по правому боку (float: right;) мы убрали. Ко всему этому, мы добавили отступ (margin-top: 25px;), чтобы эти два блока разделялись.

Для того, чтобы картинки также сужались нужно использовать этот код

img {
 max-width: 100%;
 height: auto;
 width: auto\9; /* для ie8 */
}

border-block-width — CSS: Каскадные таблицы стилей

Свойство CSS border-block-width определяет ширину границ логического блока элемента, которая сопоставляется с шириной физической границы в зависимости от написания элемента режим, направленность и ориентация текста. Он соответствует свойствам border-top-width и border-bottom-width или border-left-width и border-right-width в зависимости от значений, определенных для режим письма , направление и ориентация текста .

Ширина границы в другом измерении может быть установлена ​​с помощью border-inline-width , который устанавливает border-inline-start-width и border-inline-end-width .

 /* <'border-width'> значения */
ширина граничного блока: 5px;
ширина пограничного блока: толстая;
/* Глобальные значения */
ширина пограничного блока: наследовать;
ширина пограничного блока: начальная;
ширина пограничного блока: вернуться;
ширина пограничного блока: обратный слой;
ширина граничного блока: не установлено;

Значения

<'border-width'>

Ширина границы. См. ширина границы .

Initial value medium
Applies to all elements
Inherited no
Percentages logical-width of containing block
Computed value абсолютная длина; 0 , если стиль границы нет или скрытый
Тип анимации дискретный
 border-width2thd'09,

Ширина границы с вертикальным текстом

HTML 
 

  
Пример текста
CSS 
 раздел {
  цвет фона: желтый;
  ширина: 120 пикселей;
  высота: 120 пикселей;
}
. exampleText {
  режим письма: вертикальный-lr;
  граница: 1px сплошной синий;
  ширина граничного блока: 5px;
}
Results
Specification
CSS Logical Properties and Values ​​Level 1
# propdef-border-block-width

BCD tables only load in the browser

with JavaScript enabled. Включите JavaScript для просмотра данных.
  • Логические свойства и значения CSS
  • Это свойство соответствует одному из свойств физических границ: border-top-width , border-right-width , ширина нижней границы и ширина левой границы
  • режим письма , направление , ориентация текста

Обнаружили проблему с содержанием этой страницы?

  • Отредактируйте страницу на GitHub.
  • Сообщить о проблеме с содержимым.
  • Посмотреть исходный код на GitHub.

Хотите принять участие? Узнайте

, как внести свой вклад.

Последнее изменение этой страницы: от участников MDN.

Бетонные блоки (CMU), размеры, формы и отделка

Бетонные блоки

, также известные как блоки бетонной кладки или CMU, обеспечивают очень прочные структурные и неструктурные перегородки. Они обычно используются в качестве резервной стены, которая покрывается отделочным материалом или выставляется в утилитарных помещениях, таких как технические помещения или подвалы. Они могут быть окрашены, чтобы обеспечить более чистое покрытие, но они также производятся с различной отделкой, которая помогает улучшить эстетическое качество по сравнению с традиционным серым CMU.

  • Номинальные и фактические размеры
  • Размер CMU
  • Технические характеристики ЦМУ
  • Формы CMU
  • Отделка поверхности CMU

Номинальные и фактические размеры

Как и кирпич, блоки CMU имеют фактические и номинальные размеры. Номинальный размер CMU равен фактическому размеру плюс ширина растворного шва. Типичные растворные швы CMU составляют 3/8 дюйма. Номинальный размер работает в пределах 4-дюймовой сетки, которой следуют другие строительные материалы. На приведенном ниже рисунке показана разница между номинальным и фактическим размерами.

Бетонный блок – Номинальные и фактические размеры

Размеры бетонных блоков (CMU)

Бетонные блоки (CMU) изготавливаются различных размеров. Они идентифицируются по их глубине, то есть по толщине стены, которую они создают. Например, 6-дюймовый CMU имеет номинальную глубину 6 дюймов, а 10-дюймовый CMU имеет номинальную глубину 10 дюймов.

Бетонные блоки также бывают половинного размера, что позволяет уменьшить потребность в резке блоков в полевых условиях в углах или на концах стен. Архитектор всегда должен пытаться проектировать здания, используя номинальные размеры с точностью до ближайшего размера полублока, чтобы уменьшить отходы и трудозатраты из-за резки блоков.

В следующей таблице указаны номинальные и фактические размеры бетонных блоков. В то время как 4″, 6″, 8″, 10″ и 12″ являются стандартными размерами, некоторые производители предлагают другие размеры, не указанные ниже. ДЮЙМЫ) ФАКТИЧЕСКИЕ РАЗМЕРЫ
Г X В X Д (ДЮЙМЫ) 4-дюймовый CMU Full Block 4″ x 8″ x 16″ 3 5/8″ x 7 5/8″ x 15 5/8″ Полублок CMU 4″ 4″ x 8″ x 8″ 3 5/8″ x 7 5/8″ x 7 5/8″ 6″ CMU Full Block 6″ x 8″ x 16″ 5 5/8″ x 7 5/8″ x 15 5/8″ 6″ Полублок CMU 6″ x 8″ x 8″ 5 5/8″ x 7 5/8″ x 7 5/8″ 8″ Полный блок CMU 8″ x 8″ x 16″ 7 5/8″ x 7 5/8″ x 15 5/8″ Полублок CMU 8″ 8″ x 8″ x 8″ 7 5/8″ x 7 5/8″ x 7 5/8″ Полный блок CMU 10″ 102227 » x 8″ x 16″ 9 5/8″ x 7 5/8″ x 15 5/8″ Полублок CMU 10″ 10″ x 8″ x 8″ 9 5 /8″ x 7 5/8″ x 7 5/8″ 12″ CMU Full Block 12″ x 8″ x 16″ 11 5/8″ x 7 5/8″ x 15 5 /8″ 12″ CMU Half-Block 12″ x 8″ x 8″ 11 5/8″ x 7 5/8″ x 7 5/8″

Технические характеристики бетонной кладки (CMU)

Производители CMU должны соответствовать стандартам ASTM при изготовлении бетонных блоков. Стандарты определяют соответствующие материалы , прочность на сжатие, допустимые размеры, влагопоглощение и другие эксплуатационные характеристики

Бетонный кирпич изготавливается из бетона, аналогичного бетонному блоку, но размеры бетонных кирпичей соответствуют размерам традиционных глиняных кирпичей (т. е. высотой 2 2/3 дюйма).

Вес бетонных блоков зависит от плотности используемой бетонной смеси. Существует три классификации CMU: легкий вес (менее 105 фунтов/фут 3 ), средний вес (от 105 фунтов/фут 3 до 125 фунтов/фут) и нормальный вес (более 125 фунтов/фут 3 ). Легкие CMU менее дороги, требуют меньше труда для установки и, как правило, обладают лучшими свойствами огнестойкости.Более тяжелые блоки имеют тенденцию снижать звукопроницаемость, имеют гораздо более высокую прочность на сжатие и обладают большей теплоаккумулирующей способностью, однако они более дороги и стоимость установки выше.Архитекторы должны указать вес CMU, если требуется конкретный вес.

В следующей таблице представлены стандарты ASTM, применимые к бетонным каменным блокам. ASTM C90 охватывает большинство обычных конструкций CMU и является стандартом, на который ссылаются коды ICC.

ASTM DESIGNATION TYPE OF CMU
ATSM C55 Concrete Brick
ASTM C73 Calcium Silicate Face Brick
ASTM C90 Load Bearing Concrete Masonry Units
ASTM C139 CMUs for construction of Catch Basins and Manholes
ASTM C744 Prefaced Concrete and Calcium Silicate Masonry Units
ASTM C936 Solid Interlocking Concrete Paving Units
ASTM C1372 Сегментные элементы подпорной стены

Формы блоков бетонной кладки (CMU)

Существует почти бесконечное количество доступных форм CMU. Изображения ниже охватывают наиболее распространенные формы, но вам следует проконсультироваться с местным производителем CMU, если вам нужны специальные формы или отделка.

Stretcher

Kerf

Allows easy cutting

Double Corner

Single Corner

Open End

Allows for vertical reinforcing

Double Open End

Allows for вертикальная арматура

Связующая балка

Позволяет установить горизонтальную арматуру

Выбивная скрепляющая балка

Позволяет каменщику располагать горизонтальную арматуру

U Lintel

Allows horizontal reinforcing

Sash

Allows control joint or door/window frame

Bullnose

Radiused corner

Scored

Number of scores varies

Ribbed

Количество ребер варьируется

Колонна

Доступны различные размеры

Колонна с пилястрой

Доступны различные размеры

Отделка поверхности бетонной кладки (CMU)

Как и в случае с формами, существует большое количество вариантов отделки, позволяющих сделать практичный серый бетонный блок более эстетичным. Обязательно встретитесь с местным представителем CMU, чтобы узнать, какие типы отделки они предлагают и по какой цене.

Цветной CMU

Пигменты можно добавлять как в бетонный блок, так и в раствор. Это позволяет блоку и раствору смешиваться или иметь резкий контраст. Имейте в виду, что будут естественные различия в цвете CMU, даже если они изготовлены из одной и той же производственной партии. Поэтому важно, чтобы архитектор рассмотрел как минимум 3 образца блоков, демонстрирующих ожидаемое изменение цвета.

Если цвет должен быть последовательным или точным, вы можете подумать о покраске блока и раствора. Окрашивание обычно выполняется внутри, но также может быть выполнено и на внешних поверхностях. Обязательно сотрудничайте с производителем CMU и поставщиком краски, чтобы выбрать правильную краску для вашей ситуации.

CMU с глазурью

CMU с глазурью имеет глазурованную поверхность, похожую на плитку, изготовленную из покрытия на основе смолы. Покрытие предлагает широкий выбор цветов, а также некоторые модели искусственных материалов. Эти поверхности могут иметь повышенную устойчивость к граффити и химическим веществам. Глазированные CMU покрываются в соответствии с ASTM C744, но блоки по-прежнему должны соответствовать требованиям ASTM C9.0 стандарт для несущих CMU.

CMU с разъемной поверхностью

CMU с разъемной поверхностью изготавливается путем формования двух блоков бок о бок, а затем их механического разделения после обжига. Это создает очень грубую текстуру, которая, по мнению некоторых людей, выглядит как камень, особенно потому, что заполнители в блоке также расколоты или обнажены.

Элементы с ребрами или насечками (рисунок выше в разделе «Формы») также могут иметь раздельную поверхность для придания большей текстуры.

CMU с раздвоенной поверхностью внизу, CMU с гладкой поверхностью выше

Soft-Split CMU

Soft-Split CMU изготавливается с использованием специальных форм, которые создают вид разделенной поверхности вместо механического разделения блоков. Эффект немного менее грубый, чем с разделенным лицом. Кроме того, форма означает, что заполнители не подвергаются воздействию.

Вороненый или полированный CMU

Бетонные блоки, также называемые шлифованными CMU, можно полировать или полировать, чтобы обнажить естественные заполнители в бетонной смеси. Важно работать с производителем, чтобы выбрать привлекательный заполнитель и протестировать процесс полировки, чтобы убедиться, что вы получите желаемую эстетику.

CMU с пескоструйной обработкой

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

Ребристый CMU

Ребристые (или ребристые) блоки имеют вертикальные рейки, нанесенные в процессе формования. Отметины не такие глубокие, как у рифленых или ребристых блоков, описанных выше в разделе «Формы», но они придают блоку привлекательную текстуру.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *