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>

div는 공백으로 구분 될 수 있습니다. 이것을 원하지 않으면 for 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올바른 행동을해야합니다. 내 생각 엔 캡슐화 된 s 에 RTL있기 때문에 엉망 입니다.float: leftdiv

그 버그 외에도 올바른 행동을 취했습니다.

width: 3000px;IE의 경우에 사용하십시오 .

위의 어느 것도 나를 위해 일하지 않았습니다.

필자의 경우, 내가 만든 사용자 정의 컨트롤에 다음을 추가해야했습니다.

display:inline-block;

min-width속성은 대부분 문제의 원인 인터넷 탐색기에서 제대로 작동하지 않습니다.

많은 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>

사용 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>

<span>태그는 문서의 그룹 인라인 소자에 사용된다.
(출처)