두 개의 Div가 서로 나란히 있으며 반응 형 변경으로 스택됩니다.

두 개의 Div가 서로 나란히 있으며 반응 형 변경으로 스택됩니다.

---

나는 내가 만드는 것보다 더 쉬울 것이라고 확신하는 것을 성취하려고 노력하고있다!

저는 Skeleton 반응 형 프레임 워크를 사용하고 있으며 지금까지 괜찮 았습니다.

다음은 내가 달성하고 싶은 것의 다이어그램입니다.

이것은 열 안에 배치됩니다. 해당 열의 크기가 줄어들면 다이어그램의 두 번째 예에 따라 div를 스택하고 싶습니다. 몇 가지 다른 방법을 시도했지만 계속 잘못 이해하고 있습니다.

저는 HTML / CSS를 처음 접했기 때문에 어떤 도움을 주시면 감사하겠습니다! 감사합니다!

---

이를 위해 CSS3 미디어 쿼리 를 사용할 수 있습니다 . 다음과 같이 작성하십시오.

CSS

.wrapper { 
  border : 2px solid #000; 
  overflow:hidden;
}

.wrapper div {
   min-height: 200px;
   padding: 10px;
}
#one {
  background-color: gray;
  float:left; 
  margin-right:20px;
  width:140px;
  border-right:2px solid #000;
}
#two { 
  background-color: white;
  overflow:hidden;
  margin:10px;
  border:2px dashed #ccc;
  min-height:170px;
}

@media screen and (max-width: 400px) {
   #one { 
    float: none;
    margin-right:0;
    width:auto;
    border:0;
    border-bottom:2px solid #000;    
  }
}

HTML

<div class="wrapper">
    <div id="one">one</div>
    <div id="two">two</div>
</div>

자세한 내용은 http://jsfiddle.net/cUCvY/1/ 확인하십시오.

---

플로팅 div는 달성하려는 것을 도울 것입니다.

예

HTML

<div class="container">
<div class="content1 content">
</div>
<div class="content2 content">
</div>
</div>

CSS

.container{
width:100%;
height:200px;
background-color:grey;
}
.content{
float:left;
height:30px;
}
.content1{
background-color:blue;
width:300px;
}
.content2{
width:200px;
background-color:green;
}

효과를 보려면 페이지를 확대하십시오.

도움이 되었기를 바랍니다.

---

오늘날 이런 일은 display:flex;

https://jsfiddle.net/suunyz3e/1435/

html :

  <div class="container flex-direction">
      <div class="div1">
        <span>Div One</span>
      </div>
      <div class="div2">
        <span>Div Two</span>
      </div>
  </div>

css :

.container{
  display:inline-flex;
  flex-wrap:wrap;
  border:1px solid black;
}
.flex-direction{
  flex-direction:row;
}
.div1{
  border-right:1px solid black;
  background-color:#727272;
  width:165px;
  height:132px;
}

.div2{
  background-color:#fff;
  width:314px;
  height:132px;
}

span{
  font-size:16px;
    font-weight:bold;
    display: block;
    line-height: 132px;
    text-align: center;
}

@media screen and (max-width: 500px) {
  .flex-direction{
  flex-direction:column;
  }
.div1{
  width:202px;
  height:131px;
  border-right:none;
  border-bottom:1px solid black;
  }
  .div2{
    width:202px;
    height:107px;
  }
  .div2 span{
    line-height:107px;
  }

}

---

를 기반으로하는 mediaquery를 사용하면 http://jsbin.com/aruyiq/1/editmin-width 와 같은 것을 얻을 수 있습니다.

CSS

.wrapper { 
  border : 2px dotted #ccc; padding: 2px; 
}

.wrapper div {
   width: 100%; 
   min-height: 200px;
   padding: 10px;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
#one { background-color: gray; }
#two { background-color: white; }

@media screen and (min-width: 600px) {
   .wrapper {
      height: auto; overflow: hidden; // clearing 
   }
   #one { width: 200px; float: left; }
   #two { margin-left: 200px; }
}

내 예에서 중단 점은 600px필요에 맞게 조정할 수 있습니다.

---

이렇게하세요 :

HTML

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
</div>

CSS

.parent{
    width: 400px;
    background: red;
}
.child{
    float: left;
    width:200px;
    background:green;
    height: 100px;
}

이것은 jsfiddle 작동 합니다 . 자식 width을 더 많이 변경 200px하면 스택됩니다.

참조 URL : https://stackoverflow.com/questions/14436800/two-divs-next-to-each-other-that-then-stack-with-responsive-change