다른 div 지우기

이미지가 연속으로 정렬되도록 레이아웃을 정렬하려고합니다. 여기 다른 div 지우기

는 현재 캡쳐 된 화면을 통해

[screengrab](http://img812.imageshack.us/img812/3867/screengrabs.jpg)

HTML

<div class="p-alignleft"></div> 
<div class="p-alignright"></div>

CSS를

.p-alignleft { 
    float: left; 
    margin-right:40px; 
    width:450px; 
    font-size: 1.2em; 
    line-height: 1.4em; 
} 
.p-alignright { 
    float: right; 
    width:450px; 
    font-size: 1.2em; 
    line-height: 1.4em; 
}

출처

2013-05-28 Mark

당신이 당신의 작업 코드를 게시하시기 바랍니다 수 있습니다 즉, div의 하나가 다른 것보다 키가 크다하더라도, 서로 옆에 줄을 만들 것입니다. http://jsfiddle.net/이 도움이 될 것입니다. –

당신은 시도 할 수 있습니다

[코드] 오른쪽 div 뒤에 다음 행 – Neil

내가 바르게 이해한다면, 당신은 여기에 몇 가지 옵션을 가지고, 그것을 조정할 필요가있다. 부동 대신에, 내 기본 설정은 각 div를 표시하도록 설정하는 것입니다. inline-block;

div { 
    display: inline-block; 
    vertical-align: top; 
}

동작하는 예제 : http://cdpn.io/ojDEl

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 

<style media="all"> 

.wrap {width: 800px;} 
.wrap div {width: 48%; display: inline-block; vertical-align: top; background: #e7e7e7; margin-bottom: 20px;} 

/* temp demo styles */ 
.wrap div {height: 200px;} 
.wrap div.test {height: 300px;} 

</style> 

</head> 
<body> 
<div class="wrap"> 
    <div>Person A</div> 
    <div class="test">Person B</div> 
    <div>Person C</div> 
    <div>Person D</div> 
</div> 
</body> 
</html>

출처

2013-05-28 04:44:54

그랬다! 감사! – Mark

을 무엇을하고 있는지의 이미지와, 난 당신이 묶어야한다고 생각합니다 각 사람의 부분은 div 안에 있고, 그들에게주고 .p-alignleft 또는 .p-alignright입니다. 그들 모두이 후, 스타일 .clear {clear:both}와 빈 <div class="clear"></div>을, 그래서 다음 두 사람은 동일한 수직 레벨

HTML로 정렬됩니다 :

<div class="p-alignleft">Person A</div> 
<div class="p-alignright">Person B</div> 

<div class="clear"></div> 

<div class="p-alignleft">Person C</div> 
<div class="p-alignright">Person D</div>

CSS :

.p-alignleft {float:left} 
.p-alignright {float:right} 
.clear {clear:both}

출처

2013-05-28 04:40:40 kevinamadeus

문제 - 그 wordpress 사용자 정의 게시물 유형과 그들은이 방법을 사용하여 열에 넣어지고 있습니다 - http://perishablepress.com/2 열 수평 순서 워드 프레스 오더/ – Mark

컨테이너 div를 행 요소로 사용 <div class="row clearfix"><div class="media">...</div></div>
두 요소를 왼쪽에 플로트하고 clear: left은 홀수 개입니다.
높이를 동일하게 설정하려면 자바 스크립트 솔루션을 사용하십시오. 그 다음에는 왼쪽, 오른쪽 또는 모두 한쪽으로 치워야합니다. 이 같은

무엇인가, 당신은 아마 더 많은 의사 코드처럼 :

var maxHeight = 0; 
var items = $('.media'); 
// get the max height of the items 
items.each(function() { 
    var height = parseInt($(this).outerHeight().replace('px', ''), 10); 
    if (maxHeight < height) { 
    height = maxHeight; 
    } 
}); 
// assign the height to all the items 
items.height(height + 'px');

출처

2013-05-28 04:44:07 guzart

다른 div 지우기

답변

관련 문제