Я хочу подогнать текст в <div> под ширину <div>, но подгонять изображения в том же <div> под ширину родительского <div>
Эта диаграмма должна прояснить ситуацию:
(здесь URL, если он слишком маленький: http://dl.dropbox.com/u/2792776/screenshots/2012-01-22_1838.png)
Я бы решил это одним из двух способов. Вот идея № 1:
CSS
#inner {width:400px; position:relative; float:left;}
HTML:
<div id="inner">
<img src="awesomeimage.jpg" alt="this awesome image" />
<p>text goes here</p>
<img src="awesomeimage.jpg" alt="this awesome image" />
</div>
SCRIPT:
<script>
var imgWidth = $(window).outerWidth();
$('#inner > img').css({
width : imgWidth + 'px'
});
</script>
Предполагается, что вы загрузили jQuery и используете Javascript на своем сайте. Если вы хотите отрегулировать ширину изображения, для заполнения, полей и границ, сделайте это в переменной.
У вас может быть масштаб изображения с окном, как в примере, используемом в этом скрипте JS, который я создал для другого вопроса: http://jsfiddle.net/D544n/1/
Идея №2: с помощью Javascript.
CSS
#outer {width:100%;} /* Outer becomes irrelevant */
#inner {width:100%;}
#inner img {width:100% !important}
#inner * {width:400px;} /* Set all childs to 400 */
HTML:
<div id="outer">
<div id="inner">
<img src="awesomeimage.jpg" alt="this awesome image" />
<p>text goes here</p>
<img src="awesomeimage.jpg" alt="this awesome image" />
</div>
</div>
Селектор для этого был схвачен из другого S.O. Вопрос.
Я не думаю, что вы найдете простой и понятный способ сделать это. Это мои две лучшие идеи, и это можно решить другими способами. Если вы идете по этому пути, чтобы организовать свой контент, вы можете подумать о своей стратегии при достижении своей цели.
Что делать, если вы полностью избавились от внутреннего div, но поместили ширину 400 пикселей на все теги p в внешнем div? Затем все будет правильно работать, и изображения будут дочерними элементами внешнего div, поэтому они могут быть ограничены шириной.
Конечно, это может вызвать некоторые проблемы, если есть много других элементов, которые должны содержаться в области 400px, но если это только абзацы и некоторые заголовки, то вы настроены.
Я уточнил свой подход. Меня вдохновил Адам Данн answer.
Все, что вам нужно сделать, это обернуть каждый img с помощью <div class="sanitize">|</div>. Либо сделайте это на стороне сервера (рекомендуется), либо с помощью небольшого jQuery wrap (слева для читателя в качестве домашней работы).
Также не допускайте div только p s.
Секреты:
div.border, если вам нужноmax-width в inherit !importanthttp://jsfiddle.net/HerrSerker/PSPyZ/9/
<div class="container">
<div class="border"></div>
<div class="inner">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. .</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <div class="sanitize">
<img src="http://lorempixel.com/800/200/sports/2" /></div>
</p>
<div class="sanitize"><img src="http://lorempixel.com/800/200/sports/2" /></div>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<br clear="left" />
</div>
.container {
position: relative;
width: auto;
border: 1px solid red;
}
.container > .inner {
border: 1px solid gold;
width: 100%;
min-width: 400px;
}
.container > .inner > * {
max-width: 400px;
}
.container > .inner .sanitize {
position: relative;
max-width: inherit !important;
border: 1px solid green;
width: 100%;
}
.container > .inner .sanitize > img {
display: block;
width: 100%;
}
.container > .border {
width: 400px;
position: absolute;
top: 1px;
left: 1px;
bottom: 1px;
height: 100%;
border: 1px solid silver;
}
Почему бы и нет?
См. Здесь для примера: http://jsfiddle.net/HerrSerker/PSPyZ/
С небольшим количеством js вы можете сделать это, избегая всех осложнений.
$(document).ready(function() {
//read every images
$("img").each(function(k,v) {
//get the width parent parent
var width = $(this).parent().parent().innerWidth();
//use it
$(this).css('width',width);
});
});
Вы можете использовать свойство переполнения CSS, чтобы содержимое могло переполнять границы контейнера. Попробуйте overflow: visible на вашем внутреннем div.
Расширение ответа Лазаря:
Установите overflow:visible; в свой внутренний div. Затем используйте Javascript, чтобы установить максимальную ширину изображений в размере вашего внешнего div, то есть в окне просмотра браузера. Что-то вроде этого, может быть?
document.body.innerdiv.img.style.maxWidth = window.innerWidth + 'px';
#outer {position:absolute;top:0;left:1%;width:99%;}
#outer img{width:100%;position:absolute;left:0;}
Лучшее, что я могу описать, это строки выше, но они не будут обертывать текст вокруг причины, когда элементы с абсолютным расположением удаляются из потока.
Я думаю, что ellawren предложил лучшее решение до сих пор: "полностью избавился от внутреннего div.
Вы говорите: "содержимое DIV устанавливается пользователями (и они могут не использовать абзацы)" .
Однако вы можете запустить простой шаблон REGEX перед тем, как нарисовать "содержимое".. Шаблон разрывает текст в div/параграфах, где он не задан/до или после тега изображения /. Затем вы можете создавать изображения отдельно.
Возможно, есть грязный взлом css, но хаки никогда не являются лучшим способом решения проблемы.
HTML
<div class="outer">
<div class="inner"><p>Your content goes here</p>
<img src="http://dl.dropbox.com/u/2792776/screenshots/2012-01-22_1838.png" alt="" />
<p>Your content goes here</p></div>
</div>
CSS
.inner { float: left; width: 400px; overflow: visible; }
.inner img { width: 2000px; }
JQuery
var browserWidth = $(document).width();
$('div.inner img').css('width', browserWidth);
Может делать это с чистым css.
CSS
.container{
max-width:400px;
border:1px solid red;
}
.container > img {
width: 100%;
position:absolute;
height:200px;
}
img + p{
margin-top:200px;
}
Отметьте http://jsfiddle.net/PSPyZ/5/
Решение: Положите внутренний DIV налево, чтобы сделать его не таким широким, как внешний DIV, а затем установите максимальную ширину для внутреннего DIV и его детей.
HTML:
<div id="outer">
<div id="inner">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<img src="image.png" alt="image">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
CSS:
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#outer {
width: 100%;
height: 100%;
}
#inner {
max-width: 100%;
float: left;
}
#inner > * {
max-width: 400px;
}
#inner > img {
max-width: inherit !important;
}
DEMO: http://pastehtml.com/view/br8c4ht5n.html
(Окно Resize показывает требования OP, серый - внешний DIV, оранжевый - внутренний DIV, синий - IMG.)
Я уверен, что вы пробовали это, но это не работает
Edit:
<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 думал
В прошлом я использовал метод max-width, но должен был также включать минимальную ширину, чтобы мои изображения не становились слишком тощими.
Кроме того, если вы рассматриваете этот внутренний 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/ Сдвиньте центральный разделитель, чтобы увидеть эффект.
Я не думаю, что вы сможете достичь этого, используя чистый CSS. Вот пример использования небольшого Javascript.
<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>
.outer {
margin: 40px;
border: 2px solid black;
padding: 10px;
min-width: 404px;
}
.inner {
border: 2px solid black;
width: 400px;
}
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;