I have a text 컨테이너입니다 단락이나 함께 제목. I want to 유동 페이지 하단에 있는 페이지 오른쪽에 있는 반면, 텍스트 이미지를 둘러싸여집니다 이미지 주변의. 마지막 단락의 맨 밑에 있는 플러시합니다 이미지 하단에 합니다.
이 페이지 너버 는 변수 (응답성의) 이 있지만 이미지 치수에는 고정되어 있다. Html 과 CSS 에 (CSS3 정상입니다) 이 작업을 수행할 수 있습니까? 그렇지 않으면 수행됨 있을 수 있는 최소한의 Javascript?
S # 39, 하고 싶은 일을 here& 스키마틱 들 수 있다.
현재 는 HTML 이 같은 일이 있지만, 필요한 경우 변경할 수 있습니다. 특히, t care 여기서 내가 don& # 39 의 이미지 문서화해야 위치해 있다. 너무 배경 이미지를 사용하는 대신 내린다.
<section>
<h2>...</h2>
<p>... ...</p>
<p>... ...</p>
...
<img src="...">
</section>
When I set "float: 하지만, 그것은 바로 '의 이미지를 유동합니다 이해했소 정렬하려면 오른쪽 하단에 페이지 수는 없어요. 제안?
스페이서 (spacer) 로 만드는 요소 'float: 오른쪽 '와' 높이 '같은 내용의) 의 높이 빼기 이미지. 그러면 'float: 오른쪽 '와' 선택해제합니다: 오른쪽 '의 이미지:
<div class="spacer"></div>
<img class="bottomRight" src="" />
<div class="content"></div>
.spacer {
height: calc(100% - 200px);
width: 0px;
float: right;
}
.bottomRight {
height: 200px;
float: right;
clear: right;
}
내 데모 /dev/raw/raw1 고정식입니다 치수에는 컨테이너에 요소. 아마 더 잘 이해할 수 있는 현실적인 JavaScript 를 사용할 경우, 이후 거의 규모를 측정하십시오 스페이서 (spacer). 이 문서는 요소점과 스페이서 (spacer) 때, 이 함수를 호출하는 반군지역 대한 참조입니다 준비됐어들 동안 '빈다우스프레시즈' 이벤트.
function sizeSpacer(spacer) {
spacer.style.height = 0;
var container = spacer.parentNode;
var img = spacer.nextElementSibling || spacer.nextSibling;
var lastContentNode = container.children[container.children.length - 1];
var h = Math.max(0, container.clientHeight - img.clientHeight);
spacer.style.height = h + "px";
while (h > 0 && img.getBoundingClientRect().bottom > lastContentNode.getBoundingClientRect().bottom) {
spacer.style.height = --h + "px";
}
}
이 함수는 작동됨 ([데모 보기] (
)) 또는 수 있으며 재작업 jQuery 의 라이브러리에 선택이다. # 39 it& 수 있지만, s 는 제작되지 않은 품질의 코드를 플러그-인을 나타내는 개념이다.[jsfiddle.net/n5RPV/9] (
)향후 이 문제를 어떻게 해결할 수 있는 방법이 될 것 같아요 CSS 제외.
>. 이전에 랩할 컨텐츠 개념을 확장하여 css 제외 >. 유동합니다 제한됩니다. . 그들의 인라인 컨텐츠의 내용에 요소이면 레이아웃뿐만 영역 및 줄 바꿈될 제외 지역에 관련 랩할 컨텍스트로 (발췌한 내용을 [사양] 에서 2)
이 msdn 문서 도 제외 설명합니다.
>. 이제 완전히 포함되었을 수 있도록 만든 이 드웨브 텍스트 흐름 >. 이에 따라, 기존의 한계를 요소를 피하는 유동합니다. >. 대신 왼쪽 또는 오른쪽으로 인컨텍스트 제한 요소를 부동 >. 그들의 위치를 기준으로 문서의 흐름, CSS 제외 될 수 있습니다. >. 지정된 거리에 포지셔닝됩니다 top, bottom, 왼쪽 또는 >. 블럭 오른쪽 측면에 있는 반면, 나머지 부분은 >. 문서 흐름.
아이러니하게도, 현재까지 이 문제는 IE10 작동합니다 (look for 모두 랩 흐름 here)
이게 코드는 다음과 같습니다.
<div class="container">
<div class="exclusion">
Exclusion positioned at bottom right hand side of text.
</div>
<div class="dummy_text">
<p>text here</p>
</div>
</div>
.container {
font-size: small;
background: aqua;
position: relative;
}
.exclusion {
-ms-wrap-flow: both;
-ms-wrap-margin: 10px;
z-index: 1;
position:absolute;
right:0;
bottom:0; /* try fiddling with this. For some reason bottom: -10px (or the like) works better here */
width: 150px;
height: 100px;
background: url(http://placehold.it/150x100) no-repeat;
}
따라서 비록 nnt 포지셔닝됩니다 제외) 는 아직 알 수 있습니다 - - - 이 경우에 부동 소수점 역할을 합니다. 부동 소수점 아래 오른쪽.
이 사이트 에서 지원됩니까 체크아웃합니다 있는 속성을 보여주는 이 브라우저 (to date: 모두 랩 흐름 ie10+ 汲摹窍妨绰 '만')
PS: 최신 업데이트 (CSS 와 같은 유사 모듈 및 기타 지역 및 CSS 모양) 를 두고 CSS 제외 usb. Adobe 웹 플랫폼 팀 블로그
내가 조금 CSS 와 자바스크립트 등의 그것을했다 다음과 같습니다.
,
' ()' 기능을 하나의 단순한 플로라티프리.
아이디어 영감을 받았다. http://www.csstextwrap.com/
마치 이 사용하여 일할 CSS3& # 39 의 flex 기입란 속성 와 함께 '배경 이미지를' 이다. 난 꽤 CSS 만 사용하는 닫으십시오 이해했소 수 있었습니다. ( 작동하잖아 하지만 조금 요구사항뿐 면변형을 ) 도, 아닐 수도 있다는 이상적인 cause I did a little bit 만들기 위해 이 작동합니까 수정표시와 변경해야 한다. 그러나 그 가치가 순결케 CSS 솔루션을 찾고 있다면 아마도 총에 맞아 사망했다.
, 슬라이드에서는 > 데모 -
<section >
<h2>Some Heading:</h2>
<p>...</p>
<p class="last">
<span class="image"></span>
</p>
</section>
.last {
display:inline-flex;
flex-direction:row;
}
.image {
padding:5px 0 0 5px;
width:100%;
background-image:url("http://dribbble.s3.amazonaws.com/users/200359/screenshots/758731/stackoverflow_logo.png");
background-size:100%;
background-repeat:no-repeat;
background-position:bottom right;
}
내가 일한 적이 있는 & jquery 기반 솔루션이므로 mdash;; 아마도 우아한 표시되어도 gilly3 올린 것과 그렇지 않은 경우도 있다.) 또한, 약간 느린 및 it& # 39 을 가리킨다.
제 2 의 섹션 '하는 것이 요령, 덮어쓰기/추가 < div>, 왼쪽에 있는 엔티티와 숨겨진 너버 하던 너비 0. Div, 요소 중 하나가 될 것 같은 이미지를 치수처리 지정된 ghost) 가 같은 다른 div 가 아래 포지셔닝됩니다 지정된 높이 스페이서 (spacer). While 루프는 스크립트입니다 /dev/raw/raw1 설정할 수 있는 요소가 도달했음 고스트 경우 상위 섹션 요소. 이 경우 아직 들어온넘 이를 때까지 1 씩 스페이서 (spacer) 의 높이 증분할 조건이 달성됨.
수정표시와 사용한 것으로 따라와야지! # 39 m, HTML5 를 사용하여 '속성' 아래 이미지를 데이터 i& 식별할 수 있는 이미지 수 있는지 단면에는 상장하였다. 물론 이는 벤처기업 선택하려는 방법에 따라 정확한 섹션 요소.
<section id="c1" data-bottom-image>
<h2>...</h2>
<p>...</p>
<img src="http://placehold.it/250x100" />
</section>
그리고 jQuery 스크립트입니다.
$(function () {
$("section > img:last-child").each(function () {
// Offset image based on the bottom and right padding of parent
var $par = $(this).parent();
$(this).css({
bottom: $par.css('padding-bottom'),
right: $par.css('padding-right')
});
});
// Function: adjust height of height-spacer, pixel by pixel
function adjustHeightSpacer($par, $hs, $is) {
// Stretch height spacer
$hs.height(0);
$hs.css({
height: $par.find("img").position().top - parseInt($par.css('padding-top'))
});
// Adjust height spacer
while($par.height() - $is.height() > $is.position().top - parseInt($par.css('padding-top'))) {
$hs.height("+=1");
}
while($par.height() - $is.height() < $is.position().top - parseInt($par.css('padding-top'))) {
$hs.height("-=1");
}
};
$("section[data-bottom-image]").each(function() {
// Append two spacers:
$(this).prepend('<div class="ghost height-spacer" /><div class="ghost image-spacer" />')
var $hs = $(this).find(".height-spacer"),
$is = $(this).find(".image-spacer");
// Adjust image spacer dimension
$is.css({
height: $(this).find("img").height(),
width: $(this).find("img").width()
});
// Adjust height spacer
adjustHeightSpacer($(this), $hs, $is);
});
$(window).resize($.debounce(250,function() {
$("section[data-bottom-image]").each(function() {
// Adjust height spacer
adjustHeightSpacer($(this), $(this).find(".height-spacer"), $(this).find(".image-spacer"));
});
}));
});
작업 및 슬라이드에서는 해야했다.
하나의 매체를 사용하여 쿼리합니다 레이아웃용 이를 달성할 수 있습니다.
HTML
<section>
<h2>...</h2>
<p>... ...</p>
<p>... ...</p>
<img src="..." class="show-medium">
...
<img src="..." class="show-small">
</section>
CSS
html, body {
height: 100%;
width: 100%;
}
img {
display: none;
float: right;
clear: right;
}
@media (max-width: Xpx), (max-height: Xpx) {
/* show img for small screens */
.show-small { display:block; }
}
@media (min-width: Xpx) and (max-width: Xpx) and (min-height:Xpx) and (max-height: Xpx) {
/* show img for medium screens */
.show-medium { display:block; }
}
@media (min-width: Xpx) and (min-height: Xpx) {
/* show img as body background for large screens */
body {
background: url("http://placehold.it/200x300") no-repeat fixed right bottom transparent;
}
}
서로 다른 시간 화면 해상도가 아니라 이 있다. [지켜보리니 데모] [1].
이 제품을 아니라 미디어 재생 / CSS 조정하십시오 쿼리합니다 포지셔닝하십시오 수정표시와 내 이미지를 만들기 위해 it 작동합니까.
CSS 는 파이어폭스, 오페라, 사파리, 크롬, 3 에서 미디어 쿼리합니다 3.5+ 7+ IE9+. 기존의 인터넷 익스플로러 버전 1 이 수리입니다 사용할 수 있습니다. http://code.google.com/p/css3-mediaqueries-js/
<section class="flagpole">
<div class="pole"></div>
<img class="flag" src="..." />
<p>Paragraphs...</p>
</section>
.pole, .flag {
float: right;
clear: right;
}
.pole {
width: 0.1px
}
function setFlag() {
$('section.flagpole').each(function () {
var poleHeight = $(this).height() - $(this).find('.flag').height();
$(this).find('.pole').height(poleHeight);
});
}
setFlag();
$(window).on('resize', function () {
setFlag();
});
모든 것에 대해 우려를 불식시키기 위해 표절, 이 솔루션을 기반으로 하고 있다 [또 다른 유사한 오토메이티드] [1] 귈이예요 제공한 내 뒤로를.
[1]: # 14204568 https://stackoverflow.com/questions/14204136/create-an-html-element-that-doesnt-move/14204568