CSS div 배치

먼저 다음 이미지를 참조하십시오. enter image description here CSS div 배치

이것은 레이아웃에 대한 기본적 아이디어입니다.

내가 원하는 것은 :

내용 DIV 브라우저가 가 크기를 조정할 때, 그것은 일종의 중간에 유지해야한다 예를 들어, "주요 초점"으로;
브라우저 크기를 조정할 때 두 개의 이미지를 기본적으로 콘텐츠 div 아래에 놓아야합니다. (설명이 전혀 확실하지 않은 ,하지만 당신이 이해하기를 바랍니다);
(그리고 것) 브라우저가보다 넓은 1400px (+ 200 200 + 1000),이 경우, I가 지금까지 스틱 왼쪽 이미지를 원하는 것을 발생할 수있는 권리에 대한 동일 가능한 남아 이미지 가능한 한 오른쪽으로 튀어 나와 있습니다.
또한 브라우저 크기가 일 때 사이드 스크롤바가 나타나기를 원하지 않습니다. (또는 너비가 1400px보다 작음).

이들은 모두 현재 내 머리 꼭대기에서 생각할 수있는 요구 사항입니다.

나는 여러 가지 방법을 사용하여 꽤 많은 시간 동안 CSS에서 물건을 찾고 장난을 치고 있었지만 원하는 효과를 얻지 못했습니다. 두 번이나 솔루션에 매우 가깝지는 않았지만 단순히 하나의 CSS 요소 또는 기타를 놓친 것 같지는 않습니다. Z- 색인, 부동 및 기타 자료를 사용하여 시도했습니다.

아무도 도와 줄 수 있습니까? 사전에

감사합니다. 코드의

예 :

CSS :

#backgroundimages { 
    overflow:hidden; 
    height: 1000px; 
} 

#imageleft{ 
    float:left; 
    background: url(homebg.png); 
    height: 1000px; 
    width: 445px; 
} 


#imageright{ 
    background: url(homebg2.png); 
    float:right; 
    height: 1000px; 
    width: 445px; 
} 


#middlecontent { 
    float:left; 
    overflow:visible; 
    height: 1000px; 
    width: 1000px; 
    margin-left: auto; 
    background-color: red; 
}

HTML :

<div id="backgroundimages"> 
    <div id="imageleft"></div> 
    <div id="middlecontent"></div> 
    <div id="imageright"></div> 
</div>

이, 예를 들어, 내가 성취하고 싶은 아주 가까이 보이지만, 우선 콘텐츠 div는 중앙에 있지 않으며 크기를 조정할 때마다 여전히 왼쪽 이미지에 초점을 맞 춥니 다.

출처

2013-05-17 Tienus McVinger

거의 결과가있을 수있는 코드의 예를 들어 보시겠습니까? – Doug

당신이 찾고있는 단어가 "반응 적"이라고 생각합니다. 조회중인 화면 너비에 맞게 조정되는 템플리트. 이 결과는 자바 스크립트 (예 : jQuery)와 CSS를 사용하는 방법과 CSS 미디어 쿼리를 사용하는 방법으로 생각할 수 있습니다. 이 문구 중 몇 개를 인터넷으로 검색하고 찾은 내용을 확인하십시오. – Doug

죄송합니다. 내 코드를 추가하는 데 시간이 걸렸습니다. 나는 여기에서 포맷팅에 실패한다. 위의 예제는 내가 원하는 것에 거의 가깝게 보이지만 원하는대로 작동하지 않습니다. 나도 이해가 안되는 이유는 모르겠지만 어떻게 해결해야할지 모르겠다. 또한, 당신이 언급 한이 물건의 일부를 google합니다. 감사. –

내가 어떻게 할 것인가 ... 최선의 해결책이라고 말하는 것은 아닙니다. 나는 CSS 미디어 쿼리가 충분히 지원되지 않아서 나를 도와 줄 작은 jQuery 조각을 만들었다. 동일한 결과를 얻는 방법 (더 나은 jQuery 프로그래머의 피드백은 언제나 환영합니다!)

다음은 jQuery를

$(document).ready(function(){ 

var reportWidth = true; 

if (reportWidth){ 
    $('body').append('<div id="reportWidth">'); 
    $('#reportWidth').css({ 
     position:'fixed', 
     bottom:0, 
     left:0, 
     right:0, 
     backgroundColor:'#666666', 
     color:'#ffffff' 
    }) 
} 

    var breakpoint=new Array(); 
    breakpoint.push(320); // iPhone 4 & 5 in portrait 
    breakpoint.push(480); // iPhone 4 in landscape 
    breakpoint.push(568); // iPhone 5 in landscape 
    breakpoint.push(768); // iPad in portrait 
    detectViewportWidth(breakpoint,reportWidth); 
    $(window).resize(function(){ 
    detectViewportWidth(breakpoint,reportWidth) 
    }); 
}); 

function detectViewportWidth(breakpoint,reportWidth){ 
    var htmlClassPrefix='pageWidth-'; 
    var currentWidth=$(window).width(); 
    var noBreakpoints=breakpoint.length; 
    var widthClass=noBreakpoints+'-'+(noBreakpoints+1); 
    $('html').removeClass(htmlClassPrefix+widthClass); 
    var previousArrayVal=0; 
    $.each(breakpoint,function(arrayKey,arrayVal){ 
     $('html').removeClass(htmlClassPrefix+arrayKey+'-'+(arrayKey+1)); 
     if (currentWidth<=arrayVal && currentWidth>previousArrayVal){ 
      widthClass=arrayKey+'-'+(arrayKey+1); 
     } 
     previousArrayVal=arrayVal; 
    }); 
    $('html').addClass(htmlClassPrefix+widthClass); 
    if (reportWidth){ 
     $('#reportWidth').text(htmlClassPrefix+widthClass); 
    } 
}

와 CSS되는 HTML

<body> 
    <div id="one">Content in here</div> 
    <div id="two">Content in here</div> 
    <div id="three">Content in here</div> 
</body>

입니다 :

div { 
    border:1px solid #999999; 
    display:inline-block; 
    width: 29%; 
    margin: 0 1%; 
} 
.pageWidth-0-1 div, 
.pageWidth-1-2 div 
{ 
    display:block; 
    width:98%; 
}

는 기본적으로 그것이 무엇을하는 뷰포트가 얼마나 넓은 감지하고 클래스를 적용 .pageWidth-2-3 행을 따라 본문 태그에. 창의 크기를 변경하면 하단의 작은 상태 표시 줄이 그에 따라 변경됩니다. .pageWidth-0-1이 가장 좁으며 .pageWidt-4-5가 가장 넓습니다 (그러나 jQuery에서 설정할 수있는 분할 점 또는 "중단 점"수에 대한 이론적 인 제한은 없습니다).

그런 다음 CSS에서 기본 레이아웃을 설정합니다. 기본 레이아웃을 일반적인 3 열 레이아웃으로 바꿀 수도 있습니다. 여기서는 대다수의 방문자가 보통 모니터 ... 예를 들면.

그런 다음 뷰포트가 작아지면 특정 스타일 동작을 정의 할 수 있습니다. 잘하면 내 CSS에서 div가 전체 너비 및 블록이 될 때 pageWidth가 .pageWidth-0-1 또는 .pageWidth-1-2 일 때의 재정의를 사용하여 기본 3 열 레이아웃을 설정 한 것을 볼 수 있습니다.

바이올린에서 창 너비를 변경해보십시오. 너가 충분히 좁아지면 div가 수직 열로 떨어지는 것을보아야합니다.

이렇게하면 시작점이 될 수 있기를 바랍니다.

출처

2013-05-17 09:56:56 Doug

그냥 추가 ...이 질문에 완전히 대답하지 않을 것입니다. 위의 CSS를 테스트하지는 않았지만 빠른 검사에서 정상적으로 보입니다. CSS 기술은 초기 레이아웃을 완성하는데 충분할 것으로 생각합니다.이 대답을 사용하여 반응 형 레이아웃으로 만들 수 있습니다.일반적인 아이디어는 페이지가 너무 작아지면 요소에서 부와 폭을 제거하기 시작하는 것입니다. HTH – Doug

[모든 모바일 브라우저에서 미디어 쿼리를 지원합니다] (http://caniuse.com/#feat=css-mediaqueries), 정말로 흥미로운 대안 인 크래킹 대답. – Xareyo

사실, @YaMo, 그러나 나는 1024 또는 800 너비의 고풍 15 인치 모니터에서 Internet Exploder 6 또는 NutScrape (미안한 NetScape)를 사용하는 사람들을 더 많이 언급하고 있습니다. 우리는 아직도 일부 클라이언트가 어두운 시대 : – Doug

CSS div 배치

답변

관련 문제