[css] 두 div, 하나는 고정 너비, 다른 하나는 나머지

Program / 글쓴이

두 개의 div 컨테이너가 있습니다.

하나는 특정 너비가 필요하지만 다른 div가 나머지 공간을 차지하도록 조정해야합니다. 내가 할 수있는 방법이 있습니까?

.left {
    float: left;
    width: 83%;
    display: table-cell;
    vertical-align: middle;
    min-height: 50px;
    margin-right: 10px;
    overflow: auto;
}

.right {
    float: right;
    width: 16%;
    text-align: right;
    display: table-cell;
    vertical-align: middle;
    min-height: 50px;
    height: 100%;
    overflow: auto;
}
<div class="left"></div>
<div class="right"></div> <!-- needs to be 250px -->

스 니펫 확장

답변

참조 : http://jsfiddle.net/SpSjL/ (브라우저 너비 조정)

HTML :

<div class="right"></div>
<div class="left"></div>

CSS :

.left {
    overflow: hidden;
    min-height: 50px;
    border: 2px dashed #f0f;
}

.right {
    float: right;
    width: 250px;
    min-height: 50px;
    margin-left: 10px;
    border: 2px dashed #00f;
}

display: table일반적으로 더 나은 접근 방식 인을 사용 하여 수행 할 수도 있습니다. 입력 요소를 레이블과 같은 줄에 배치하려면 어떻게해야합니까?

답변

2017 년이고 가장 좋은 방법은 IE10 +와 호환 되는 flexbox를 사용하는 것입니다 .

.box {
  display: flex;
}

.left {
  flex: 1;  /* grow */
  border: 1px dashed #f0f;
}

.right {
  flex: 0 0 250px; /* do not grow, do not shrink, start at 250px */
  border: 1px dashed #00f;
}
<div class="box">
  <div class="left">Left</div>
  <div class="right">Right 250px</div>
</div>

스 니펫 확장

답변

CSS의 calc () 함수를 사용할 수 있습니다.

데모 : http://jsfiddle.net/A8zLY/543/

<div class="left"></div>
<div class="right"></div>

.left {
height:200px;
width:calc(100% - 200px);
background:blue;
float:left;
}

.right {
width:200px;
height:200px;
background:red;
float:right;   
}

이것이 당신을 도울 것입니다!

답변

소스 코드에서 순서를 바꿀 수 있다면 다음과 같이 할 수 있습니다.

HTML :

<div class="right"></div> // needs to be 250px    
<div class="left"></div>

CSS :

.right {
  width: 250px;
  float: right;
}

예 : http://jsfiddle.net/blineberry/VHcPT/

컨테이너를 추가하면 현재 소스 코드 순서와 절대 위치를 사용할 수 있습니다.

HTML :

<div id="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

CSS : 

#container {
  /* set a width %, ems, px, whatever */
  position: relative;
}

.left {
  position: absolute;
  top: 0;
  left: 0;
  right: 250px;
}

.right {
  position: absolute;
  background: red;
  width: 250px;
  top: 0;
  right: 0;
}

여기에서, .leftDIV는에서 암시 적으로 설정 폭을 얻을 top, left그리고 right그것의 나머지 공간을 채우기 위해 수 있습니다 스타일 #container.

예 : http://jsfiddle.net/blineberry/VHcPT/3/

답변

컨테이너에 포장 할 수 있다면 <div>위치 지정을 사용하여 왼쪽을에 <div>고정 시킬 수 있습니다 . 이 데모를left:0;right:250px 참조하십시오 . 이제 IE6에서는 a의 한 모서리 만 페이지에 절대 위치 할 수 있으므로 이것이 작동하지 않는다고 말할 것입니다 ( 전체 설명 은 여기 를 참조하십시오 ).<div>

답변

1- 래퍼 div를 가지고 패딩과 여백을 원하는대로 설정하십시오
2- 왼쪽 div를 필요한 너비로 만들고 왼쪽으로 부동하게 만드십시오
3- 오른쪽 div 여백을 왼쪽 너비와 동일하게 설정하십시오

.left
{
    ***width:300px;***
    float: left;
    overflow:hidden;

}

.right
{
    overflow: visible;
    ***margin-left:300px;***
}



<div class="wrapper">
    <div class="left">
        ...
    </div>

    <div class="right" >
        ...
    </div>

</div>

이것이 당신을 위해 작동하기를 바랍니다!

답변

달성하는 방법에는 여러 가지가 있으며 마이너스 마진은 제가 가장 좋아하는 것 중 하나입니다.

http://www.alistapart.com/articles/negativemargins/

행운을 빕니다!