Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Фиксированная ширина центрального блока

Я хочу сделать что-то вроде margin: 0 auto для центрального блока, и у центрального блока должна быть фиксированная ширина, но на месте auto должны быть блоки.

Приложил картинку чтобы было понятнее что я хочу.
Ответ:

HTML5
1
2
3
4
5
6
7
8
<div class="xt">
  <div class="xr">
    <div class="c1"></div>
    <div class="c2">Pellentesque non lectus et lorem aliquet dignissim id molestie elit. Phasellus pretium sem id enim feugiat, eget blandit lorem tempor. Ut ac imperdiet nisi. Curabitur vel orci quis libero euismod posuere ac ut dui. Ut rhoncus, orci nec elementum pharetra, ex odio lacinia erat, vitae interdum ex est sed libero. Curabitur cursus egestas nibh, in volutpat enim ultrices eu. Pellentesque viverra urna eu volutpat pulvinar. Donec id purus eget arcu accumsan sagittis. Integer id risus imperdiet, laoreet sem tincidunt, viverra lacus. Donec viverra, lacus et tempus semper, purus nibh condimentum augue, id dictum nibh quam commodo velit. Proin luctus magna sed turpis lobortis, at molestie quam varius. Nulla eu rutrum justo. Ut semper at enim non dictum. Pellentesque eget erat porta, convallis ante vitae, egestas urna. Quisque in sapien in quam rutrum bibendum.
</div>
    <div class="c3"></div>    
  </div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
* {
  box-sizing: border-box;
}
 
/* 356-03 */
 
.xt{
  display: table;
  width: 100%;
}
 
.xr{
  display: table-row;
  //height: 100px;
}
 
.c1{
  display: table-cell;
  background-color: blue;
}
 
.c2{
  display: table-cell;
  width: 280px;
  background-color: green;
}
 
.c3{
  display: table-cell;
  background-color: blue;
}
Вопрос: Как мне в моем случае задать ширину центрального блока?

Всем привет! Подскажите как лучше реализовать вот такую вещь. Страница состоит из трех блоков. Два крайних блока имеют фиксированную ширину. Центральный, третий, должен подстраиваться, а именно ширина блока, под них при изменении разрешения экрана. Если делаю центральный процентом(естественно мне нужно до определенной минимальной ширины)- блоки съезжают. Как тут быть? Какое решение может быть? Пробовал width:auto; - не помогает.
Ответ: СергейЛоб,

Пример:

Код HTML5
1
2
3
<div id="right"></div>
<div id="left"></div>
<div id="center"></div>
Код CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
body
{
    margin:0;
    min-width:450px
}
#right,#left
{
    width:100px;
    height:500px;
    background:red;
}
#left
{
    float:left
}
#center
{
    background:green;
    height:500px;
    width:100%;
    margin:0 auto;
}
#right
{
    float:right
}
Вопрос: Резиновый центральный блок

Подскажите, какими средствами сделать автоматически изменяемую ширину центрального блока из трех блоков расположенных горизонтально?
HTML5
1
2
3
4
5
6
7
<div id="main"> 
        <div class="lefttab"></div>    // фиксированный размер блока                                                                        
                           
        <div class="countainer"></div> //блок должен растягиваться до блока "righttab"
 
        <div class="righttab"></div>   // фиксированный размер блока    
</div>
Ответ: Flexbox должен помочь
Вопрос: Установка фиксированной ширины

Здравствуйте. Есть сайт knigomania.org Когда просматриваешь его на больших мониторах, текст становится читать крайне неудобно. Гугл подсказал, что в этом случае необходимо установить фиксированную ширину. Подскажите пожалуйста, как это сделать? Сайт создан с помощью Юкоз.
Ответ:
Сообщение от Karssen
можно внутри wrap создать еще один див, который начинается сразу после wrap и заканчивается перед закрывающим тегом wrap. И ему задать 1000 px и маргин 0 авто
Так?

Код CSS
1
2
.wrap {background: url('/.s/t/814/1.gif') repeat-x #fff; height: 100%; }
.wrap_copy {width:1000px;margin:0px auto;}
Код HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="wrap">
<div class="wrap_copy">
$GLOBAL_AHEADER$
 <?if($MODULE_ID$='forum')?><div style="width: 95%; margin-left: 3%;"><?endif?>
<!-- <middle> -->
<table border="0" cellpadding="0" cellspacing="0" width="90%" align="center">
 <tr>
 <td class="sidebar">
 $GLOBAL_CLEFTER$
 </td>
 <td class="content">
 
 <!-- <body> --> <div style="border: 1px solid #9C9C9C; padding: 15px;border-radius:5px;" > $CONTENT$ <!-- </body> --> 
 </td>
 <td class="sidebar">
 $GLOBAL_DRIGHTER$
 </td>
 </tr>
</table>
<!-- </middle> -->
<?if($MODULE_ID$='forum')?></div><?endif?>
 
$GLOBAL_BFOOTER$
    </div>
</div>
Вопрос: Как центральный блок "block_2" растягивать занимая свободное пространство

Как центральный блок "block_2" растягивать занимая свободное пространство в конструкции:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="block">
       <span class="block_1">1111111</span><span class="block_2"></span><span class="block_3">111111</span>
       <span class="block_1">222222222222222222222222222222</span><span class="block_2"></span><span class="block_3">22222222222</span>
       <span class="block_1">3333333333333333333</span><span class="block_2"></span><span class="block_3">33333</span>
</div>
 
<style>
.block_2
  {
   border-bottom: 1px dotted #d2d2d2;
}
 
</style>
Цель отображать вот так:
Ответ: я про такой вариант когда перекрывать картинкой не подходит...
Вопрос: Как центральный блок растягивать занимая свободное пространство

Как центральный блок "block_2" растягивать занимая свободное пространство в конструкции:
<div class="block">
       <span class="block_1">1111111</span><span class="block_2"></span><span class="block_3">111111</span>
       <span class="block_1">222222222222222222222222222222</span><span class="block_2"></span><span class="block_3">22222222222</span>
       <span class="block_1">3333333333333333333</span><span class="block_2"></span><span class="block_3">33333</span>
</div>

<style>
.block_2
  {
   border-bottom: 1px dotted #d2d2d2;
}

</style>

Цель отображать вот так:
Ответ:
Сообщение от runyugin
когда перекрывать картинкой не подходит
не понял и тут, что картинкой перекрыто?
Вопрос: Уместить как можно больше блоков

Знаем ширину блока, в этот блок необходимо разместить как можно больше дочерних блоков. Ширина дочернего блока не должна быть меньше 170 и не должна превышать 250 пиксилей...

Так вот, как просчитать мол так, чтобы уместить в этот блока как можно больше дочерних блоков??

Добавлено через 12 минут
Необходимо определить какой будет ширина дочернего блока...

Добавлено через 1 час 4 минуты
И та ширина, при которой свободного(оставшегося) пространства будет как можно меньше...
Ответ:
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.block{
  width: 897px;
  height: 100px;    
  overflow: hidden;
  background:red;
}
.child-block{
  height: 100%;
  border:1px solid black;
  box-sizing: border-box;  
  float:left;
  background:#ccc;
}
HTML5
1
<div class="block"></div>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function myFunc() {
  var parent = document.querySelector('.block'),
      minBlock = 100, //минимальая ширина дочернего блока
      parentWidth = parseInt(getComputedStyle(parent).width),
      childCount = Math.floor(parentWidth / minBlock),
      childWidth = parentWidth / childCount,
      childAllWidth = childWidth * childCount,
      rest = (parentWidth - childAllWidth) / childCount;
  for (i = 0; i < childCount; i++) {
    parent.innerHTML += '<div class="child-block"></div>';
    document.querySelectorAll('.child-block')[i].style.width = 
      childWidth + rest + 'px';
  }
}
Вопрос: При фиксированной ширине флекс контейнера, не работает сокращение текста под троеточие

Есть код:
PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!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">
  <title>Document</title>
  <style>
  *{
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
body{
  line-height: 1.5;
  font-family: Arial;
  font-size: 16px;
}
  .box{
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    max-width: 320px;
  }
 
  .img-box{
    margin-right: 20px;
  }
  .title-item{
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-weight: bold;
    color: darkblue;
  }
  </style>
</head>
<body>
  <div class="box">
    <div class="img-box">
      <img src="https://www.placehold.it/100" alt="">
    </div>
    <div class="description-box">
      <div class="title-item">Супер длинный заголовок или как-то так ещё и может быть ещё длиннее</div>
      <div class="text-item"><div>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Запятой дал заманивший вопроса решила, большого семантика рот текст безорфографичный за его жаренные текста букв страну, осталось несколько рыбными парадигматическая!</div>
      <div>Которой последний они предложения ты возвращайся однажды выйти великий его знаках пор деревни вдали эта составитель ее продолжил свой, большой города, от всех текста толку о страну за свой лучше. Бросил?</div>
      <div>Инициал, вскоре возвращайся над необходимыми сбить дорогу сих агентство lorem буквоград раз путь мир, назад взгляд себя по всей за последний! Пустился рукописи океана предупреждал, над реторический даже коварный парадигматическая моей.</div>
      <div>Подзаголовок коварных возвращайся парадигматическая ручеек предложения текст знаках продолжил путь, пустился заманивший гор до рукопись, несколько безопасную своего снова напоивший даже повстречался вскоре. Повстречался эта агентство наш буквоград первую осталось!</div></div>
    </div>
  </div>
</body>
</html>
Как сделать так, что бы контент занимал ширину .box, и при этом текст в селекторе .title-item обрезался под троеточие, интересует решение именно на flex-box.
Ответ: Для .img-box указать максимальную ширину:

CSS
1
2
3
4
5
.img-box {
  width: 100%;
  max-width: 40%;
  padding-right: 20px;
}
Вопрос: Выровнять меню по ширине

Не выравнивается нижнее меню (как проехать в цирк, расписание цирка...) по ширине белого блока, который надо меню
Код HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Билеты в Цирк дю Солей</title>
</head>
<body>
<div class="container">
<div class="head">
<div class="logo"><a href="#"><img src="logo.png"></a></div>
<div class="contacts">
    <ul>
        <li><span>МОСКВА:</span> +7 (495) 640-06-26</li>
        <li><span>САНКТ-ПЕТЕРБУРГ:</span> +7(812) 640-06-26</li>
    </ul>
</div>
</div>
<div class="content">
<div class="text"><p>[Name], спасибо за заказ!</p>
<p> В*ближайшее время с*Вами свяжется менеджер, для уточнения деталей заказа и проконсультирует по местам. Если у вас есть вопросы по заказу, обращайтесь по телефону +7 (495) 646-81-88.</p>
</div>
<div class="order">
    <ul>
        <li><strong>ВАШ ЗАКАЗ №:</strong> <span>87080</span></li>
        <li><strong>Шоу:</strong> Quidam (Москва)</li>
        <li><strong>Дата:</strong> 2015-04-22 20:00:0</li>
        <li><strong>Категория:</strong> VIP Пакет</li>
        <li><strong>Количество:</strong> 1</li>
        <li><strong>К оплате (руб.): 19.000,-</strong></li>
    </ul>
</div>
<div class="photo"><img src="photo.png"></div>
</div>
<div class="footer">
<ul>
    <li><a href="#">КАК ПРОЕХАТЬ В ЦИРК</a></li>
    <li><a href="#">РАСПИСАНИЕ ЦИРКА</a></li>
    <li><a href="#">НА ГЛАВНУЮ</a></li>
    <li><a href="#">ОФЕРТА</a></li>
    <li><a href="#">КОНТАКТЫ</a></li>
    <li><a href="#">ИНФОРМАЦИЯ</a></li>
    <li><a href="#">НОВОСТИ</a></li>
</ul>
    <div class="bottom_text">©*Продажа билетов на*Цирк дю*Солей Права на*материалы, используемые на сайте, принадлежат их правообладателям.<br>
    Портал по подбору, заказу и доставке билетов, не является официальным ресурсом Цирка дю Солей</div>
</div>
</div>
</body>
</html>
Код CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
*{
    margin:0;
    padding:0;
    font-family: DINPro-Medium;
}
body{
    width: 1000px;
    height: 100%;
    min-height: 910px;
    background: #011d29;
    border: 1px solid #011925;
    margin:0 auto;
}
@font-face {
font-family: DINPro-Medium;
src: url(DINPro-Medium.otf);
}
.container{
    width: 100%;
    background: #011d29;
}
.head{
    height: 60px;
    padding: 60px 72px 69px 72px;
}
.logo{
    float: left;
    width: 133px;
    height: 38px;
}
.contacts{
    float: right;
    width: auto;
}
.contacts li{
    font-size: 16px;
    list-style: none;
    line-height: 30px;
    color: #FFFFFF;
}
.contacts li span{
    color: #e1c88d;
}
.content{
    clear: both;
    width: 855px;
    height: 560px;
    background: #FFFFFF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin-left: 72px;
    color: #414141;
}
.text {
    width: 100%;
}
.text p:first-child{
    font-size: 28px;
    padding-top: 70px;
    padding-bottom: 39px;
    text-align: center;
    line-height: 24px;
}
.text p:last-child{
    padding-left: 57px;
    padding-bottom: 57px;
    padding-right: 57px;
    font-size: 16px;
    line-height: 30px;
    letter-spacing: -0.025em;
}
.order{
    width: 50%;
    float: left;
    padding-left: 57px;
}
.order li{
    list-style: none;
    font-size: 15px;
    line-height: 30px;
}
.order li span{
    color: #7ac16b;
}
.order li:first-child{
    font-size: 20px;
    line-height: 34px;
}
.photo{
    float: right;
    padding-right: 57px;
}
.footer{
    width: 100%;
    height: auto;
}
.footer ul{
    padding-top: 61px;
    padding-bottom: 36px;
}
.footer li{
    font-size: 16px;
    display: inline;
}
.footer li a{
    list-style: none;
    text-decoration: none;
    color: #e1c88d;
}
.bottom_text{
    color: #4c575c;
    text-align: center;
    font-size: 12px;
    line-height: 24px;
}
text-align:justify не помогает
Ответ:
Сообщение от Svetlana_123
не подходит, в мозиле через одно обновление страницы то ок, то по ширине всего блока выравнивается
скиньте сюда эти 2 файла .html .css
у меня все работает в мазиле/хроме/вивалди/ие7(с другими косяками)
Вопрос: Блок по ширине другого блока

Всем доброго времени суток.
На странице есть список подразделов. На экранах с небольшим разрешением список разделов выходит за пределы границы.
Как уместить это все в блоке .col-sm-3 или сделать перенос строки?
HTML5
1
2
3
4
5
6
7
  <div class="row">
        <div style="white-space: nowrap;margin-bottom: 18px;" class="col-sm-3">
            <?php foreach ($categories as $category) { ?>
            <a style="margin-right:10px;font-size: 20px;font-weight: bold;" href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
            <?php } ?>
           </div>
      </div>
Ответ: разобрался, нужно было убрать white-space: nowrap; у блока .col-sm-3