Flexed Divs의 플로팅 요소

-1

3 열 레이아웃이 있습니다. 내 문제는이 fiddle에서 볼 수 있듯이 두 번째 <div>의 콘텐츠가 맨 아래에서 채워진다는 것입니다. 콘텐츠를 상단에 정렬하고 싶습니다.Flexed Divs의 플로팅 요소

다음 그러나 I는 flex 컨테이너 내부 요소 플로트없는 것, I는 컨테이너 display: flex;을 적용함으로써이 문제를 해결할 수

#image-container { 
display: inline-block; 
width: 100; 
} 
#info { 
display: inline-block; 
} 
#button-container { 
display: inline-block; 
float: right; 
padding: 10px; 
}

해당 HTML

<div class="user-info" style="width: 100%;"> 
    <div id="image-container"> 
    <img src="image.jpeg" height="200px" width="200px"> 
    </div> 
    <div id="info"> 
    <div class="info-item"> 
     <div class="info-attribute">tullsy</div> 
    </div> 
    <div class="info-item"> 
     <div class="info-attribute">tullsy</div> 
    </div> 
    <div class="info-item"> 
     <div class="info-attribute">tullsy</div> 
    </div> 
    </div> 
    <div id="button-container"> 
    <input type="button" id="edit_button" value="edit" class="button" onclick="function()"> 
    <br> 
    </div> 
</div>

및 CSS이고 .

fiddle에서 볼 수 있듯이 나는 <br>을 사용하여 원하는 것을 얻을 수있었습니다. 하지만 난 <br> 또는 고정 된 패딩을 사용하지 않고 동일하게하고 싶습니다. 이 아이의의

출처

2014-07-09 Tyler Sebastian

먼저 사용하지 않고 상단에있는 inline-block 하위 항목을 정렬하기위한 vertical-align:top;을 적용 할 수 있습니다, 아무것도 그 바이올린 분명하지 않습니다. 내가 볼 수있는 것은 깨진 이미지와 3 단어입니다. 두 번째로 인라인 스타일을 사용하지 마십시오. 코드를 읽을 수없고 작동하기가 어렵습니다. [CSS를 사용해야하는 이유] (https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Why_use_CSS). 청소 된 바이올린 또는 원하는 출력물의 이미지가 도움이됩니다. –

@TilwinJoy 업데이트 –

같은 일로 돌아 오게되어서 죄송 합니다만, 이제는 인라인 스타일과 CSS가 더 나빠집니다. "이 스타일은 같지만
으로 채우지 않아도됩니다."- 나는이 부분을 얻지 못했습니다. 우리는 당신이 무엇을하려고하는지 이해하지 않고는 당신을 도울 수 없습니다. :/ –

내가 제대로 이해하면, 당신은 용기 #info에 height을 적용해야 모든 첫째, 그렇지 않으면 높이에 랩을 축소 할 수 있습니다 (그래서 당신은 높이을 추가 <br>의를 사용하여 방지 할 수 있습니다) 항목.

그럼 당신은 모든 <br>의

Demo

출처

2014-07-09 06:19:45

Flexed Divs의 플로팅 요소

답변

관련 문제