DIV 랩 안하는 법?

DIV 랩 안하는 법?

여러 개의 다른 DIV가 포함된 컨테이너 DIV 스타일을 만들어야 합니다.브라우저 창이 좁게 크기가 조정되면 이러한 DIV가 랩하지 않도록 요청합니다.

저는 아래와 같이 작동되도록 노력했습니다.

<style>
   .container
   {
      min-width: 3000px;
      overflow: hidden;
   }
   .slide
   {
      float: left;
   }
</style>
<div class="container">
   <div class="slide">something</div>
   <div class="slide">something</div>
   <div class="slide">something</div>
   <div class="slide">something</div>
</div>

이것은 대부분의 경우에 효과가 있습니다.그러나 일부 특수한 경우에는 렌더링이 올바르지 않습니다.IE7의 RTL에서 컨테이너 DIV가 3000px 너비로 변경된 것을 발견했는데 지저분하게 변합니다.

포장하지 않는 컨테이너 DIV를 만드는 다른 방법이 있습니까?

사용해보기white-space: nowrap;컨테이너 스타일로 (대신)overflow: hidden;)

요소의 양을 모르기 때문에 최소 너비를 정의하지 않으려면 다음과 같은 방법만 사용할 수 있었습니다.

display: inline-block;
white-space: nowrap;

그러나 Chrome과 Safari에서만 :/

저는 다음과 같이 부동적으로 작동했습니다(시각적 효과를 위해 예제를 조금 수정했습니다).

.container
{
    white-space: nowrap; /*Prevents Wrapping*/
    
    width: 300px;
    height: 120px;
    overflow-x: scroll;
    overflow-y: hidden;
}
.slide
{
    display: inline-block; /*Display inline and maintain block characteristics.*/
    vertical-align: top; /*Makes sure all the divs are correctly aligned.*/
    white-space: normal; /*Prevents child elements from inheriting nowrap.*/
    
    width: 100px;
    height: 100px;
    background-color: red;
    margin: 5px;
}

<div class="container">
   <div class="slide">something something something</div>
   <div class="slide">something something something</div>
   <div class="slide">something something something</div>
   <div class="slide">something something something</div>
</div>

디브는 공백으로 구분될 수 있습니다.이것을 원하지 않으면 사용합니다.margin-right: -4px;대신에margin: 5px;위해서.slide(못생긴 하지만 다루기 까다로운 문제입니다.)

필요한 콤보는

white-space: nowrap

부모에게 그리고

display: inline-block; // or inline

아이들에게

효과가 있었습니다.

.container {
  display: inline-flex;
}

.slide {
  float: left;
}

<div class="container">
  <div class="slide">something1</div>
  <div class="slide">something2</div>
  <div class="slide">something3</div>
  <div class="slide">something4</div>
</div>

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

overflow: hidden올바른 행동을 해야 합니다.내 추측으로는RTL당신이 가지고 있기 때문에 엉망입니다.float: left캡슐에.divs.

그 벌레 말고도 당신은 옳은 행동을 한 겁니다.

사용하다display:flex그리고.white-space:nowrap

p{
  display:flex;
  white-space:nowrap;
  overflow:auto;
}

<h2>Sample Text.</h2>

<p>Some example text that will not wrap..lla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum d</p>

<h3>Then some other text</h3>

사용해 봅니다.width: 3000px;IE의 경우에는

위의 것들 중 어느 것도 저에게 효과가 없었습니다.

제 경우에는 제가 만든 사용자 컨트롤에 다음을 추가해야 했습니다.

display:inline-block;

그min-widthInternet Explorer(인터넷 익스플로러)에서 속성이 올바르게 작동하지 않으므로 문제의 원인일 가능성이 높습니다.

많은 IE CSS 문제를 해결하는 정보와 훌륭한 스크립트를 읽으십시오.

사용가능

display: table;

당신의 컨테이너를 위해 그러므로 피합니다.overflow: hidden;. 그것을 단지 워핑 목적으로만 사용했다면 그 일은 할 수 있을 것입니다.

<div style="height:200px;width:200px;border:; white-space: nowrap;overflow-x: scroll;overflow-y: hidden;">
   <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.</p>
</div>

그<span>태그는 문서의 인라인 패턴을 그룹화하는 데 사용됩니다.
(출처)

언급URL : https://stackoverflow.com/questions/718891/how-to-make-a-div-not-wrap