Question

我需要一些css-positioning的帮助：

所有东西都设置了我想要的移动设备，但是当在更大的屏幕上显示时，我想要id =“centerpicture”和id =“centertext”来切换位置。

我试过“浮动：左/右;”正如你所看到的那样，但这似乎并没有成功。

请指教。感谢。

front

		@media (max-width:800px) {
			.htmlcontent {
				width: 98.5%;
			}
		
			.htmlpicture > img {
				display: block;
			}
			
			#topcontent {
				padding-top: 15px;
			}
		
			.htmltext > h2, p {
				margin: 0px;
				padding: 0px;
			}
			
			.htmltext > h2 {
				font-size: 24px;
			}
			
			.htmltext > p {
				padding-top: 2px;
			}
		
			.htmltext {
				padding-top: 12px;
				padding-bottom: 12px;
				text-align: center;
			}
		}
		
		@media (min-width:801px) {
			.htmlcontent {
				display: grid;
				grid-template-columns: 50% 50%;
			}
			
			.htmlpicture > img {
				display: block;
			}
			
			.htmltext {
				padding: 12px;
				text-align: center;
			}
			
			#centerpicture {
				float: right;
			}
			
			#centertext {
				float: left;
			}
		}

Answer 1

您可以使用display: flex;和order属性。这是一个例子。您可以在媒体查询中更改顺序。

        
		
#main {
    width: 400px;
    height: 150px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex; /* Safari */
    display: flex;
}

#main div {
    width: 70px;
    height: 70px;
}

   

div#myRedDIV   {order: 3;background:coral;}
div#myBlueDIV  {order: 1;background:lightgreen;}
div#myGreenDIV {order: 4;background:pink;}
div#myPinkDIV  {order: 2;background:red;}

@media screen and (max-width: 767px){
         div#myRedDIV   {order: 1;}
         div#myBlueDIV  {order: 2;}
         div#myGreenDIV {order: 3;}
         div#myPinkDIV  {order: 4;}    
}

 

      <div id="main">
  <div id="myRedDIV">1</div>
  <div  id="myBlueDIV">2</div>
  <div id="myGreenDIV">3</div>
  <div  id="myPinkDIV">4</div>
</div>

Answer 2

Flexbox是一个选项，但您已在容器上使用display: grid。所以你只需要添加：

#centertext {
    order: -1;
}

我建议您避免使用#ids来指定CSS，只依赖于.class选择器。可以在网上找到原因，例如BEM uses only class selectors。

@media (max-width:800px) {
			.htmlcontent {
				width: 98.5%;
			}
		
			.htmlpicture > img {
				display: block;
			}
			
			#topcontent {
				padding-top: 15px;
			}
		
			.htmltext > h2, p {
				margin: 0px;
				padding: 0px;
			}
			
			.htmltext > h2 {
				font-size: 24px;
			}
			
			.htmltext > p {
				padding-top: 2px;
			}
		
			.htmltext {
				padding-top: 12px;
				padding-bottom: 12px;
				text-align: center;
			}
		}
		
		@media (min-width:801px) {
			.htmlcontent {
				display: grid;
				grid-template-columns: 50% 50%;
			}
			
			.htmlpicture > img {
				display: block;
			}
			
			.htmltext {
				padding: 12px;
				text-align: center;
			}
			
			#centertext {
				order: -1;
			}
		}

<body>
	<div class="htmlcontent" id="topcontent">
		<div class="htmlpicture">
			<img src="https://www.fing.edu.uy/inco/grupos/gsi/img/placeholder.png" alt="Placeholder" height="100%" width="100%">
		</div>
		<div class="htmltext">
			<h2>WHO ARE WE?</h2>
			<p>Lorem ipsum dolor sit amet consectetur adipiscing elit facilisis vel commodo, sem luctus tellus ac penatibus dictumst nostra dapibus tristique. Fames gravida scelerisque id lobortis magnis conubia mauris orci mi, morbi sociis phasellus sed ullamcorper litora sodales. Odio velit ante varius bibendum, faucibus blandit maecenas ligula torquent, ad netus sociosqu.</p>
		</div>
	</div>
	
	<div class="htmlcontent">
		<div class="htmlpicture" id="centerpicture">
			<img src="https://www.fing.edu.uy/inco/grupos/gsi/img/placeholder.png" alt="Placeholder" height="100%" width="100%">
		</div>
		<div class="htmltext" id="centertext">
			<h2>WHAT SETS US APART?</h2>
			<p>Lorem ipsum dolor sit amet consectetur adipiscing elit facilisis vel commodo, sem luctus tellus ac penatibus dictumst nostra dapibus tristique. Fames gravida scelerisque id lobortis magnis conubia mauris orci mi, morbi sociis phasellus sed ullamcorper litora sodales. Odio velit ante varius bibendum, faucibus blandit maecenas ligula torquent, ad netus sociosqu.</p>
		</div>
	</div>
	
	<div class="htmlcontent">
		<div class="htmlpicture">
			<img src="https://www.fing.edu.uy/inco/grupos/gsi/img/placeholder.png" alt="Placeholder" height="100%" width="100%">
		</div>
		<div class="htmltext">
			<h2>COMMITED TO QUALITY</h2>
			<p>Lorem ipsum dolor sit amet consectetur adipiscing elit facilisis vel commodo, sem luctus tellus ac penatibus dictumst nostra dapibus tristique. Fames gravida scelerisque id lobortis magnis conubia mauris orci mi, morbi sociis phasellus sed ullamcorper litora sodales. Odio velit ante varius bibendum, faucibus blandit maecenas ligula torquent, ad netus sociosqu.</p>
		</div>
	</div>
</body>

Answer 3

我在父div上使用了flex-direction：row-reversed来实现这一点。我不得不使用flex-basis：50％的子div，以确保它们各占50％的页面。

@media (min-width:801px) {

            .htmlpicture > img {
                display: block;
            }

            .htmltext {
                padding: 12px;
                text-align: center;
            }
            .desktop-reversed {
                display:flex;
                flex-direction: row-reverse;
            }
            .desktop-reversed div {
                flex-basis:50%;
            }
        }



<div class="htmlcontent desktop-reversed">
        <div class="htmlpicture" id="centerpicture">
            <img src="https://www.fing.edu.uy/inco/grupos/gsi/img/placeholder.png" alt="Placeholder" height="100%" width="100%">
        </div>
        <div class="htmltext" id="centertext">
            <h2>
                WHAT SETS US APART?
            </h2>
            <p>
                Lorem ipsum dolor sit amet consectetur adipiscing elit facilisis vel commodo, sem luctus tellus ac penatibus dictumst nostra dapibus tristique. Fames gravida scelerisque id lobortis magnis conubia mauris orci mi, morbi sociis phasellus sed ullamcorper litora sodales. Odio velit ante varius bibendum, faucibus blandit maecenas ligula torquent, ad netus sociosqu.
            </p>
        </div>
    </div>

我需要两个元素来通过CSS切换位置

3 个答案: