Разрешить изображения в <div>быть шире, чем строки текста в том же <div> - PullRequest
Новая
       77

Разрешить изображения в <div>быть шире, чем строки текста в том же <div>

14 голосов
/ 23 января 2012

Я хочу подогнать текст в <div> к ширине <div>, но изображений в том же <div> в ширину parent <div>

Эта диаграмма должна прояснить ситуацию:

http://dl.dropbox.com/u/2792776/screenshots/2012-01-22_1838.png

(вот URL, если он слишком мал: http://dl.dropbox.com/u/2792776/screenshots/2012-01-22_1838.png)

Ответы [ 13 ]

0 голосов
/ 14 марта 2012

Я не думаю, что вы сможете достичь этого, используя чистый CSS. Вот пример использования небольшого Javascript.

HTML 

<div class="outer">
    <div class="inner">
        some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text
        <img src="http://tinyurl.com/7pl9cw8" />
        <p>more text more text more text more text more text more text more text more text more text more text more text more text more text more text more text more text more text more text</p>
    </div>
</div>​

CSS 

.outer {
    margin: 40px;
    border: 2px solid black;
    padding: 10px;
    min-width: 404px;
}
.inner {
    border: 2px solid black;
    width: 400px;
}​

JS 

function changeWidth() {
    var ele = document.getElementsByTagName("img");
    var width = (document.getElementsByTagName("div")[0].offsetWidth - 28) + "px";
    for(var i = 0; i < ele.length; i++) {
        ele[i].style.width = width;
    }
}
window.onload = window.onresize = changeWidth;
​

DEMO

http://jsfiddle.net/XdAPU/

0 голосов
/ 14 марта 2012

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

Кроме того, если вы рассматриваете этот внутренний div какпоследовательность блоков контента, ваш документ, вероятно, будет работать немного более интуитивно, и вам не нужно много позиционирования и т. д. 

#outer > div { width:400px; border:1px dotted gray; }
#outer > img { max-width:100%; min-width:400px }

<div id="outer">
    <div>Inner div block 1 content and whatnot. Inner div block 1 content and whatnot.<div>Nested block within div block 1 with image...<img src="http://jsfiddle.net/img/logo.png"></div></div>
    <img src="http://www.alenawooten.com/wp-content/uploads/2012/01/images1.jpg">
    <div>Inner div block 2 content and whatnot. Inner div block 2 content and whatnot.<div>Nested block within div block 2 with image...<img src="http://jsfiddle.net/img/logo.png"></div></div>
    <img src="http://www.alenawooten.com/wp-content/uploads/2012/01/images1.jpg">
</div>

Вот jsfiddle: http://jsfiddle.net/B4gKS/ СлайдЦентральный разделитель, чтобы увидеть эффект.

0 голосов
/ 08 марта 2012

Я уверен, что вы пробовали это, но это не работает

Редактировать: 

    <script type="text/javascript">
function viewport()
{
var width;
var height;
var e = window,
 a = 'inner';
if ( !( 'innerWidth' in window ) )
{
a = 'client';
e = document.documentElement || document.body;
}
 width = e[ a+'Width' ];

$('div#inner > img').attr('width', width);
}
</script>

Вы можете прочитать код ширины браузера с: http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

Я простонемного отредактировал и добавил бит jQuery 

    #outer
{
    width:100%;
    float:left; 
}
#inner
{
    width:400px;
    float:left; 
}

<body onload="viewport();">
<div id="outer">
  <div id="inner">
  Text
  <img scr="" />
  Text
  </div>
</div>
</body>

Пример: http://projects.kausweb.com/stack

Я не уверен, что вы хотели, чтобы javascript думал

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...