오른쪽 아래 랩할 수립하였습니다 텍스트와 이미지를 떠

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: 하지만, 그것은 바로 '의 이미지를 유동합니다 이해했소 정렬하려면 오른쪽 하단에 페이지 수는 없어요. 제안?

  • 편집: 나는 attaboy 는 가장 가까운 이. -) *
molf
편집된 질문4일 11월 2013 в 4:40
프로그래밍
image html css
4일 11월 2013 в 3:19
4 파운드
질문에 대한 의견 (14)
해결책

스페이서 (spacer) 로 만드는 요소 'float: 오른쪽 '와' 높이 '같은 내용의) 의 높이 빼기 이미지. 그러면 'float: 오른쪽 '와' 선택해제합니다: 오른쪽 '의 이미지:

<div class="spacer"></div>

<div class="content"></div>
.spacer {
    height: calc(100% - 200px);
    width: 0px;
    float: right;
}
.bottomRight {
    height: 200px;
    float: right;
    clear: right;
}

http://cssdesk.com/bLNWs

내 데모 /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";
    }
}

이 함수는 작동됨 ([데모 보기] (http://jsfiddle.net/n5RPV/9/)) 또는 수 있으며 재작업 jQuery 의 라이브러리에 선택이다. # 39 it& 수 있지만, s 는 제작되지 않은 품질의 코드를 플러그-인을 나타내는 개념이다.

[jsfiddle.net/n5RPV/9] (http://jsfiddle.net/n5RPV/9/)

  • Edit: 플러그인에는 내가 만든 jQuery 는 버전 ([ 깃허브 ] (https://github.com/gilly3/lowFloat) [ 이스피들 데모 ] (http://jsfiddle.net/n5RPV/10/)) 또는 * 敲阀汽俊 汲摹窍妨绰 떠 있는 왼쪽 하단 오른쪽 하단. 또한 함께 할 수 있는 요소를 정렬하려면 지정할 수 있습니다.

39;;; 그나저나 내가 &lt sub&gt didn& IE7.&lt /sub&gt, 지원해야 하는 수는 없는 노릇.

Jesse
편집된 답변15일 5월 2018 в 9:08
해설 (14)

향후 이 문제를 어떻게 해결할 수 있는 방법이 될 것 같아요 CSS 제외.

&gt. 이전에 랩할 컨텐츠 개념을 확장하여 css 제외 &gt. 유동합니다 제한됩니다. . 그들의 인라인 컨텐츠의 내용에 요소이면 레이아웃뿐만 영역 및 줄 바꿈될 제외 지역에 관련 랩할 컨텍스트로 (발췌한 내용을 [사양] 에서 2)

이 msdn 문서 도 제외 설명합니다.

&gt. 이제 완전히 포함되었을 수 있도록 만든 이 드웨브 텍스트 흐름 &gt. 이에 따라, 기존의 한계를 요소를 피하는 유동합니다. &gt. 대신 왼쪽 또는 오른쪽으로 인컨텍스트 제한 요소를 부동 &gt. 그들의 위치를 기준으로 문서의 흐름, CSS 제외 될 수 있습니다. &gt. 지정된 거리에 포지셔닝됩니다 top, bottom, 왼쪽 또는 &gt. 블럭 오른쪽 측면에 있는 반면, 나머지 부분은 &gt. 문서 흐름.

아이러니하게도, 현재까지 이 문제는 IE10 작동합니다 (look for 모두 랩 흐름 here)

[이 바이올린] [5] 에 IE10+ 체크아웃하려고

이게 코드는 다음과 같습니다.

 <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>

CSS

.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 포지셔닝됩니다 제외) 는 아직 알 수 있습니다 - - - 이 경우에 부동 소수점 역할을 합니다. 부동 소수점 아래 오른쪽.

  • 관련 브라우저 support:*

이 사이트 에서 지원됩니까 체크아웃합니다 있는 속성을 보여주는 이 브라우저 (to date: 모두 랩 흐름 ie10+ 汲摹窍妨绰 '만')

PS: 최신 업데이트 (CSS 와 같은 유사 모듈 및 기타 지역 및 CSS 모양) 를 두고 CSS 제외 usb. Adobe 웹 플랫폼 팀 블로그

Danield
편집된 답변13일 11월 2013 в 7:10
해설 (2)

# 39 의 같아요 it& 해결되었다. 작동하잖아!

내가 조금 CSS 와 자바스크립트 등의 그것을했다 다음과 같습니다.

, http://jsfiddle.net/stichoza/aSScx/

' ()' 기능을 하나의 단순한 플로라티프리.

  • 응답성의.
  • Window 크기조정 won& # 39, t break it.
  • 모든 이미지 너비 / 높이.
  • 동일팔레트에 많은 텍스트 운영까지도.

아이디어 영감을 받았다. http://www.csstextwrap.com/

Stichoza
편집된 답변13일 11월 2013 в 1:05
해설 (5)
  • 가능한 CSS Solution: ( 전용 테스트를 크롬 *)

마치 이 사용하여 일할 CSS3& # 39 의 flex 기입란 속성 와 함께 '배경 이미지를' 이다. 난 꽤 CSS 만 사용하는 닫으십시오 이해했소 수 있었습니다. ( 작동하잖아 하지만 조금 요구사항뿐 면변형을 ) 도, 아닐 수도 있다는 이상적인 cause I did a little bit 만들기 위해 이 작동합니까 수정표시와 변경해야 한다. 그러나 그 가치가 순결케 CSS 솔루션을 찾고 있다면 아마도 총에 맞아 사망했다.

, 슬라이드에서는 &gt 데모 - http://jsfiddle.net/ADSH2/

  • 새로운 Markup: ( 다르지 않은 *)
<section >
  <h2>Some Heading:</h2>
  <p>...</p>
  <p class="last">
     <span class="image"></span>
  </p>
</section>
  • CSS:*
.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;
}
  • Resources:*
  1. http://css-tricks.com/snippets/css/a-guide-to-flexbox/
  2. http://dev.w3.org/csswg/css-flexbox-1/
Kris Hollenbeck
편집된 답변12일 11월 2013 в 3:15
해설 (4)

내가 일한 적이 있는 &amp jquery 기반 솔루션이므로 mdash;; 아마도 우아한 표시되어도 gilly3 올린 것과 그렇지 않은 경우도 있다.) 또한, 약간 느린 및 it& # 39 을 가리킨다.

제 2 의 섹션 '하는 것이 요령, 덮어쓰기/추가 &lt div&gt, 왼쪽에 있는 엔티티와 숨겨진 너버 하던 너비 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>

</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"));
        });
    }));
});

작업 및 슬라이드에서는 해야했다. http://jsfiddle.net/teddyrised/xmkAP/5/

Terry
편집된 답변6일 11월 2013 в 8:37
해설 (0)
  • CSS 전용 Solution.*

하나의 매체를 사용하여 쿼리합니다 레이아웃용 이를 달성할 수 있습니다.

HTML

<section>
  <h2>...</h2>
  <p>... ...</p>
  <p>... ...</p>

  ...

</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/

해설 (2)

39 의 here& 조금 가벼운 솔루션을 통해 포함한다.

http://jsfiddle.net/isherwood/6BvC2/

<section class="flagpole">
    <div class="pole"></div>

    <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

Community
편집된 답변23일 5월 2017 в 12:02
해설 (0)

이:

<section class="post">
  <h2>...</h2>
  <p>... ...</p>
  <p>... ...</p>
  ...

</section>


.post img {float:right;margin-top:80%}
    • 80% 변경하십시오 최선의 결과를 얻을 수 있습니다.

행운을 빕니다.

해설 (0)