уменьшить div-width до ширины его содержимого или до ширины содержимого выше / ниже

Question

уменьшить div-width до ширины его содержимого или до ширины содержимого выше / ниже

0

Если вы посмотрите на этот jsfiddle:

<div class="text">
    <div id="image">this is an image with unknown width</div>
    This is some text above,This is some text above,This is some text above,This is some text above,This is some text above,This is some text above,
    <div class="code">special content</div>
    and this is some text below,and this is some text below,and this is some text below,and this is some text below,and this is some text below,
</div>

Css:

.text{
    color:red;
    text-align:justify;
    margin-top:20px;
}

.code{
    border:1px solid blue;
    border-left:10px solid #ccc;
    background:#eee;
    padding:5px;
    margin:5px;
}
.code:before{
    display:block;
    font-size:80%;
    font-style:italic;
    content:"Example:";
    margin-bottom:5px;
}

#image{
    float:right;
    border:2px solid red;
    height:150px;
    width:150px;
    margin-left:40px;
}

Я хочу, чтобы синий квадрат div (специальный контент) был такой же, как текст выше/ниже, или ширина его содержимого, что проще. Почему вообще этот div как ширина, как экран?

Любые предложения, что лучший способ?

Edit1: простое решение с переполнением: http://jsfiddle.net/v5GXT/6/

.code{
    border:1px solid blue;
    border-left:10px solid #ccc;
    background:#eee;
    padding:5px;
    margin:5px;
    overflow-x: hidden;
}

user3304232 13 март 2014, в 22:47

Источник

0

добавить отображение: встроенный блок; в ваш класс .code
Juan Castillo 13 март 2014, в 21:12
0

Ваш вопрос вводит в заблуждение. Заголовок говорит, что reduce div-width to content width но вы также упомянули, что div box to be the same width as the text above/below . Это совершенно разные.
Hashem Qolami 13 март 2014, в 21:37
0

Да, ты прав, я изменил это
user3304232 13 март 2014, в 21:40
0

@ user3304232 Таким образом, я почтительно удалю свой ответ.
Hashem Qolami 13 март 2014, в 21:42
0

Почему вы удалили свой ответ, который показал именно то, что я хотел, и был идеальным ответом?
user3304232 13 март 2014, в 21:52
0

@ user3304232 Извините, я подумал, что неправильно понял вопрос, поскольку вы приняли другой ответ. Не проверял ваше обновление.
Hashem Qolami 13 март 2014, в 22:11
0

Да, оба ответа показывают мне что-то новое, чему можно поучиться :)
user3304232 13 март 2014, в 22:25

Показать ещё 5 комментариев

Теги:

html

css

3 ответа

1

Так много разных способов сделать это, это один из самых простых:

.code в div уровня блока и сделайте .code inline-block

HTML:

<div class="codeContainer">
    <div class="code">special content</div>
</div>

CSS:

.codeContainer {
    display: block;
}

.code {
    display:inline-block;
    width:auto;
    border:1px solid blue;
    border-left:10px solid #ccc;
    background:#eee;
    padding:5px;
    margin:5px;
}

ДЕМО: http://jsfiddle.net/v5GXT/13/

Arbel 13 март 2014, в 18:18

0

проверить эту скрипку

Изменение css

.code{
margin: 5px 190px 0 0;
}

XciA 13 март 2014, в 21:08

Ещё вопросы

добавить отображение: встроенный блок; в ваш класс .code
Ваш вопрос вводит в заблуждение. Заголовок говорит, что reduce div-width to content width но вы также упомянули, что div box to be the same width as the text above/below . Это совершенно разные.
@ user3304232 Таким образом, я почтительно удалю свой ответ.
Почему вы удалили свой ответ, который показал именно то, что я хотел, и был идеальным ответом?
@ user3304232 Извините, я подумал, что неправильно понял вопрос, поскольку вы приняли другой ответ. Не проверял ваше обновление.
Да, оба ответа показывают мне что-то новое, чему можно поучиться :)

Hashem Qolami · Accepted Answer · 2014-03-13T18-16-00.000Z

Я хочу, чтобы синий квадрат div (специальный контент) был такой же, как текст выше/ниже

Вы можете добавить overflow-x: hidden; к .code div, чтобы скрыть горизонтальное переполнение следующим образом:

.code {
    border:1px solid blue;
    border-left:10px solid #ccc;
    background:#eee;
    padding:5px; margin:5px;

    overflow-x: hidden;
}

РАБОЧАЯ ДЕМО.