div 테두리가있는 CSS 이미지

영어로 설명하기 어려울 수 있습니다. 나는 이미지 (50x50과 margin-right:20px)를 원하고 그 이미지 옆에 (오른쪽으로) div (경계선 포함)가 컨테이너의 끝으로 가길 원한다. 컨테이너는 모든 크기가 될 수 있습니다 (정적 값은 ...). 나는 자바 스크립트없이 이것을 할 수있는 방법이 있는지 궁금 해서요. 나는 이런 식으로 뭔가했다div 테두리가있는 CSS 이미지

그래서 경우 : 내가 실수로 내가 태그 또는 무언가의를 닫습니다 잊어 버린 경우

<div id='some-global-container-that-is-a-resizable-length'> 
    <div class='img'> 
     <img src='myimage.png'> 
    </div> 
    <div class='content'> 
     here is some content i want to be displayed from my server 
    </div> 
</div>

.img { width:50px; margin-right:20px } 
.content { height:30px; line-height:30px; padding:10px 0; border:1px solid #272727 }

을 그리고 난 그 코드 이런 식으로 뭔가 같이 할 좋아, 실제 코드는 스택 오버플로 wysiwyg에서 만들지 못했습니다 ... 이것은 CSS 질문입니다 .. K thx!

나는 내가 그것을 다른 사업부 "내"가 나타납니다 float:left와 .IMG을하려고하면 내가 원하지 무엇이며 display:inline은 할 것이다 ...
을이 말을 잊었다 div (테두리 포함)가 이미지 div 아래에 나타납니다.

출처

2011-12-23 Michael

그래서, 당신이 원하는 :'[IMG] [......... ...... 내용 ...............]'? –

정확하게! (그게 내가 만든 것보다 훨씬 쉬웠다.) – Michael

그리고 때로는 이미지가 다른 크기 일 수있다. (나는 약간의 여백을 남겨두고 이미지에 떠있을 수 있었지만 덜 "해킹"한 방법이 있는지 궁금해하고 있었다. [... img] [...... 내용 ....]
[..img ..] [... content ...]' – Michael

HTML :

<div class='container'> 
    <img /> 
    <div class='text'> 
     content... 
    </div> 
</div>

CSS :

.container{ 
    overflow:hidden; 
} 

img{ 
    width:50px; 
    height:50px; 
    background:#ffa; 
    float:left; 
} 

.text{ 
    margin-left:70px; 
}

JSFIDDLE : http://jsfiddle.net/qy3yy/

출처

2011-12-23 05:51:15

이것은 실제로 내가 한 차이점을 제외하고 무엇을했다. 이후 img의 수 있습니다. 서로 다른 크기 (나의 선택) (b ecause 난 동적 솔루션을 원했어) 방금 전 .text.img50 않았다 (왼쪽 70px 왼쪽) 정적 값을 필요로하지 않는 자바 스크립트가 아닌 동적 솔루션을 바란다. – Michael

다음 CSS는 레이아웃을 관리해야합니다.

.img{width:50px; float: left; clear: none;} 
.content{width: auto; margin-left: 50px; float: none;}

필요에 따라 다른 스타일을 추가 할 수 있습니다. DIV 안에있는 것처럼 이미지가 나타나지 않습니다. :)

출처

2011-12-23 05:50:13 techfoobar

방법이 약간 복잡합니다. – Michael

복잡한가? - BTW, 만약 당신이 테이블 히터 (내가 btw 일이),이 테이블을 만들 수 있습니다. – techfoobar

div 테두리가있는 CSS 이미지

답변

관련 문제