#html #css
#HTML #css
Вопрос:
Вместо определения фиксированной ширины div, я хочу указать минимальную ширину (если содержимое намного меньше) и максимальную ширину (если содержимое больше, скройте дополнительное содержимое).
Например, мой html:
<div class="container">
<div class="test">x</div>
</div>
CSS:
.container{
padding:10px;
border:1px solid red;
width:200px;
text-align:center;
}
.test{
border:1px solid green;
}
Как вы можете видеть, контейнер имеет фиксированную ширину 200 пикселей. Я хочу разместить тестовый div в центре контейнера. Поскольку в тестовом классе есть только одна буква, я хочу, чтобы размер тестового класса был не менее 50 пикселей, но не более 100 пикселей.
Я пробовал min-width и max-width, но не смог заставить это работать. Вот ссылка на jsfiddle.
Спасибо за любую помощь.
Ответ №1:
Проблема в том, что <div> это элементы уровня блока, которые не изменяют размер автоматически в соответствии со своим содержимым. Что вы можете сделать, так это заставить ваш div вести себя так, table-cell у которых есть возможность изменять размер, и установить для него min-width и max-width .
.test {
min-width: 200px;
max-width:1000px;
display: table-cell;
word-wrap: break-word;
word-break: break-all;
}
Ответ №2:
Поехали!
С помощью margin:0 auto; вы можете сделать его централизованным 🙂 (Просто удалите его, если вы не хотите, чтобы он располагался по центру)
Комментарии:
1. Спасибо, но min-width на самом деле не работает в примере. Я хочу сделать это, если содержимое внутри теста очень мало похоже на 1 символ, тогда минимальная ширина должна составлять 50 пикселей. если содержимое больше и не помещается, то ширина тестового div должна увеличиться, но не должна превышать 100 пикселей. Надеюсь, вы поняли мою точку зрения.
2. Хорошо, если это так (если я правильно понимаю: P), то вам не нужна минимальная ширина, просто установите ширину, а затем отобразите:block. Я обновил этот пример jsfiddle.net/SnhhK/5
Ответ №3:
Использование min и max-width для элемента,test сработало для меня.