1. 홈
  2. 질의 응답
  3. 텍스트에 따라 상자 너비를 조정하십시오.

텍스트에 따라 상자 너비를 조정하십시오.

2016-06-16 4 views
0

저는 게임 커뮤니티를위한 서버 상태 사이트를 만들고 있습니다. 나는 텍스트의 높이가 변하지 않는 상자로 문제를 발견했다.텍스트에 따라 상자 너비를 조정하십시오.

This is the site

는 그리고이 순간에 내 CSS입니다 :

.explain_container { 
    border: 1px solid #BFC4C7; 
    background: white; 
    width: 1000px; 
    height: 120px; 
    position: relative; 
    font-size: 14px; 
    color: #5A5A5A; 
} 
.explain_text { 
    width: 900px; 
    height: 50px; 
    position: relative; 
    top: 50px; 
    margin-left: auto; 
    margin-right: auto; 
}

그리고 이것은 내 HTML입니다 : 모든 4 개면에 50 픽셀의 여백에 대해 할

<div class="explain_container"> 
    <div class="explain_text"> 
     Text that's longer should extend the height of the box. 
     Text that's longer should extend the height of the box. 
     Text that's longer should extend the height of the box. 
     Text that's longer should extend the height of the box. 
     Text that's longer should extend the height of the box. 
     Text that's longer should extend the height of the box. 
     Text that's longer should extend the height of the box. 
     Text that's longer should extend the height of the box. 
     Text that's longer should extend the height of the box. 
     Text that's longer should extend the height of the box. 
     Text that's longer should extend the height of the box. 
     Text that's longer should extend the height of the box. 
     Text that's longer should extend the height of the box. 
     Text that's longer should extend the height of the box. 
     Text that's longer should extend the height of the box. 
     Text that's longer should extend the height of the box. 
     Text that's longer should extend the height of the box. 
     Text that's longer should extend the height of the box. 
     Text that's longer should extend the height of the box. 
     Text that's longer should extend the height of the box. 
    </div> 
</div>

이되어 있습니다. 어떻게 해결할 수 있습니까?

출처

2016-06-16 Jonathan Öhrström

+0

왜 스크롤 한 ? 스크롤 가능한 것은 나를 위해 더 합리적인 것 같습니다. –

답변

1

난 그냥 .explain_container를 사용하여 모든면에서 패딩을 사용하여 상당히 쉽게 해결! 높이를 전혀 정의하지 않고!

출처

2016-06-16 14:30:37

+0

예, 실제로 더 의미가 있습니다. – nicael

0

내부 컨테이너에 상단 오프셋을 추가하면 외부 컨테이너에 상대적으로 이동합니다. 외부 컨테이너에 top:50px을 추가하려고했습니다.

데모 :

.explain_container { 
 
border: 1px solid #BFC4C7; 
 
background: white; 
 
width: 1000px; 
 
height: 120px; 
 
position: relative; 
 
font-size: 14px; 
 
color: #5A5A5A; 
 
top: 50px; 
 
} 
 
.explain_text { 
 
width: 900px; 
 
height: 50px; 
 
position: relative; 
 

 
margin-left: auto; 
 
margin-right: auto; 
 
}
<div class="explain_container"> 
 
    <div class="explain_text"> 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
    </div> 
 
</div>

출처

2016-06-16 14:27:57 nicael

1 

.explain_container { 
 
border: 1px solid #BFC4C7; 
 
background: white; 
 
width: 1000px; 
 
position: relative; 
 
font-size: 14px; 
 
color: #5A5A5A; 
 
} 
 
.explain_text { 
 
width: 900px; 
 
margin-left: auto; 
 
margin-right: auto; 
 
}
<div class="explain_container"> 
 
     <div class="explain_text"> 
 
      Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. 
 
     </div> 
 
    </div>
div를위한

제거 높이도는

출처

2016-06-16 14:32:37 Shivani

0

그래서 몇 가지 문제가 최고의 위치를 ​​제거합니다. 첫 번째는 @nicael에서 언급했듯이 최상위 속성이 추가 된 것입니다. 또한 각 컨테이너에서 명시적인 높이 속성을 제거해야합니다. 텍스트와 컨테이너 사이에 공백을 추가하려면 패딩을 사용하십시오. 과 같이, height: auto와 현재의 높이를 바꾸

.explain_container { 
 
    border: 1px solid #BFC4C7; 
 
    background: white; 
 
    width: 1000px; 
 
    height: auto; 
 
    position: relative; 
 
    font-size: 14px; 
 
    color: #5A5A5A; 
 
} 
 
.explain_text { 
 
    width: 900px; 
 
    height: auto; 
 
    position: relative; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    padding: 10px; 
 
}
<div class="explain_container"> 
 
    <div class="explain_text"> 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
    </div> 
 
</div>

출처

2016-06-16 14:33:10

0

을 당신이 explain_container의 height를 제거하고 대신 자동으로 설정해야한다고 가정 해 봅시다. margin 대신 padding을 사용하십시오.

This jsFiddle이 될 수 있습니다.

.explain_container { 
 
    border: 1px solid #BFC4C7; 
 
    background: white; 
 
    width: 1000px; 
 
    height: auto; 
 
    position: relative; 
 
    font-size: 14px; 
 
    color: #5A5A5A; 
 
} 
 

 
.explain_text { 
 
    width: 900px; 
 
    height: auto; 
 
    position: relative; 
 
    padding: 50px; 
 
}
<div class="explain_container"> 
 
    <div class="explain_text"> 
 
    Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend 
 
    the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. 
 
    Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should 
 
    extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the 
 
    box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. 
 
    </div> 
 
</div>

출처

2016-06-16 14:40:16 reshad

관련 문제

 관련 문제