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>

The divs may be separated by spaces. If you don't want this, use margin-right: -4px; instead of margin: 5px; for .slide (it's ugly but it's a tricky problem to deal with).

---

The combo you need is

white-space: nowrap

on the parent and

display: inline-block; // or inline

on the children

---

This worked for me:

.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 should give you the correct behavior. My guess is that RTL is messed up because you have float: left on the encapsulated divs.

Beside that bug, you got the right behavior.

---

Try to use width: 3000px; for the case of IE.

---

None of the above worked for me.

In my case, I needed to add the following to the user control I had created:

display:inline-block;

---

The min-width property does not work correctly in Internet Explorer, which is most likely the cause of your problems.

Read info and a brilliant script that fixes many IE CSS problems.

---

you can use

display: table;

for your container and therfore avoid the overflow: hidden;. It should do the job if you used it just for warpping purpose.

---

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

---

The <span> tag is used to group inline-elements in a document.
(source)

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