0
저는 Flexboxes를 반응 형 웹 디자인에 사용하고 있으며 디스플레이 크기에 따라 div 상자의 순서를 변경하고 있습니다.CSS Flexbox 주문
PC-View의 경우 두 가지 유형의 디자인을 사용합니다. 왼쪽 그림 (왼쪽 플로트, 오른쪽 왼쪽), 오른쪽 그림 (오른쪽 플로트, 오른쪽 오른쪽)은 텍스트로 플로트합니다.
Mobile-View의 경우 "주문"을 사용하여 플렉스 박스 디자인 (상단에 제목, 그림을 그리고 나서 텍스트)으로 바꿉니다. 이것은 아무런 문제없이 오른쪽 그림에 대해 작동합니다. 왼쪽 사진에 동일한 코드를 사용하면 사진을 바꿀 기회없이 아래쪽에 그림이 표시됩니다.
누구나 이유가 있습니까? display: flex;를 사용하는 경우
@media only screen and (max-width: 900px) {
div.wrap_content_pic_left, div.wrap_content_pic_right {
\t width: 97%;
\t \t \t \t
\t \t display: -webkit-flex;
\t \t display: flex;
\t \t -webkit-flex-direction: column;
\t \t flex-direction: column;
\t \t -webkit-align-items: center;
\t \t align-items: center;
\t \t -webkit-justify-content: center;
\t \t justify-content: center
\t \t \t \t
\t } \t \t \t
\t div.wrap_content_pic_right h1, wrap_content_pic_left h1, {
\t \t -webkit-order: 1;
\t \t order: 1;
\t }
\t div.wrap_content_pic_right h3, wrap_content_pic_left h3, {
\t \t -webkit-order: 3;
\t \t order: 3;
\t }
\t div.wrap_content_pic_left div#pic, div.wrap_content_pic_right div#pic {
\t \t float: none;
\t \t \t
\t \t -webkit-order: 2;
\t \t order: 2;
\t
\t \t width: auto;
\t \t text-align: center;
\t \t \t
\t }
}
div.wrap_content_pic_right, div.wrap_content_pic_left {
\t \t /*Position*/
\t \t position: relative;
\t \t padding: 1%;
\t \t margin-bottom: 1%;
\t \t clear: both;
\t }
\t div.wrap_content_pic_right div#pic {
\t \t /*Size*/
\t \t width: 30%;
\t \t \t \t \t \t
\t \t /*Position*/
\t \t float: right;
\t \t clear: right;
\t \t \t \t \t \t
\t }
\t \t
\t \t
\t div.wrap_content_pic_left div#pic {
\t \t /*Size*/
\t \t width: 30%;
\t \t /*Position*/
\t \t float: left;
\t \t clear: left;
\t }<div class = "wrap_content_pic_left">
<div id="pic">
<a href = "URL"><img src="PIC"/></a>
<h3><a href = "URL">Text</a></h3>
</div>
<h1>Title</h1>
<h3>Text</h3>
<div id="mobile" ><h3><a href = "URL">Text</a></h3></div>
<div style="clear: both"></div>
</div>
\t
플렉스 컨테이너에서는 부동 소수점이 무시됩니다. http://stackoverflow.com/q/39194630/3597276 –