时间戳

首页 > 解决方案 > 订单位置不适用于媒体查询

html - 订单位置不适用于媒体查询

问题描述

一直在为此苦苦挣扎。我想在移动模式下更改 div 的顺序。换句话说，当媒体查询是@media only screen and (max-width: 375px). 有问题的 div 是一排按钮。这就是我想要的样子。正确的图像这就是我到目前为止

基本上我希望按钮出现在正确的示例中的按钮上。每当我改变周围的东西时，我要么得到正确的移动版本，但桌面版本不正确。另外，只是想说该应用程序是使用 React 构建的。下面是html的代码：

<div className={darkMode ? "card-dark-mode" : "card-light-mode" }>

      <NavBarCard handlechange={()=> setDarkMode(prevMode => !prevMode)} moonMode={darkMode ? "moon fas fa-moon" :
        "moon far fa-moon"}
        darkMode={darkMode ? "dark-mode" : "light-mode"}/>
        <div className="detailCard">
          <Link to="/">
          <button className="topButton myButton">
            <i class="fas fa-arrow-left"></i>Back
          </button>
          </Link>
          <div className="container">

            <img className="flag" alt="flag" src={country.flag} />
          <div className="borderName">
            <div className="countryName">

              <div className="NativeName">
                <h1 className="Country">{country.name}</h1>
                <h2>Native Name:</h2>
                <p> {country.nativeName}</p>
                <br />
                <h2>Population:</h2>
                <p> {country.population}</p>
                <br />
                <h2>Region:</h2>
                <p> {country.region}</p>
                <br />
                <h2>Sub Region:</h2>
                <p> {country.subregion}</p>
                <br />
                <h2>Capital:</h2>
                <p> {country.capital}</p>
                <br />
              </div>

            </div>
            <div className="borderCountries">
                  <h2>Border Countries:</h2>{country.borders
                  ? country.borders.map((border) => (
                  <button className="myButton" onClick={()=> {
                    fetchItem(border);
                    history.push(`/DetailCard/${border}`);
                    }}
                    >
                    {border}
                  </button>
                  )):null}
              </div>
            </div>
            <div className="domain">
                <h2>Top Level Domain: </h2>
                <p>{country.topLevelDomain}</p>
                <br />
                <h2>Currencies: </h2>
                <p>{country.currencies && country.currencies.map(({ name }) => name).join(", ")}</p>
                <br />
                <h2>Languages: </h2>
                <p>{country.languages && country.languages.map(({ name }) => name).join(", ")}</p>
                <br />
              </div>
          </div>
        </div>

    </div>

下面是css：

     .detailCard {
     /* position: relative; */
     padding-top: 50px;
     }
    .Country {
    text-align: justify;
    }

  .card-light-mode {
  background-color: #fff;
  color: #333;
  }

 .card-dark-mode {
 height: 1400px;
 background-color: hsl(207, 26%, 17%);
 color: hsl(0, 0%, 100%);
 /* height: 1400px; */
 }


 h2 {
 padding-right: 15px;
 }

 h2,
 p {
 display: inline-block;
 }

 .container {
 display: flex;
 flex-direction: row;
 justify-content: space-evenly;
 padding-left: 50px;
 }

.flag {
position: relative;
right: 75px;
border-radius: 2px;
padding: 15px;
width: 500px;
}

.domain {
padding-top: 65px;
}

.myButton {
box-shadow: inset 0px 1px 0px 0px #ffffff;
background: linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
background-color: #ffffff;
border-radius: 6px;
border: 2px solid #dcdcdc;
display: inline-block;
cursor: pointer;
color: #666666;
/* font-family:Arial; */
font-size: 15px;
font-weight: 600;
margin: 4px 4px;
padding: 6px 24px;
text-decoration: none;
text-shadow: 0px 1px 0px #ffffff;
}

.myButton:hover {
background: linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
background-color: #f6f6f6;
}

 .myButton:active {
  position: relative;
  top: 1px;
  }

.topButton {
position: relative;
left: 150px;
 }

@media only screen and (max-width: 375px) {
.container {
 display: flex;
 flex-direction: column;
 width: fit-content;
 }

.borderCountries {
 order: 1;
 }

 .card-dark-mode {
 width: fit-content;
 }

.flag {
display: block;
margin-left: 50px;

}

.topButton {
 position: relative;
 left: 30px;
 bottom: 20px;
 }

.domain {
 padding-top: 30px;
 }
}

该组件的桌面版本如下所示： 桌面版. 如您所见，边境国家按钮出现在首都下方。任何帮助，将不胜感激。如果这似乎是一个冗长的解释，我们深表歉意。

标签： htmlcssreactjsflexboxmedia-queries

解决方案

我已经看过你的代码，按照目前的结构，很难实现你想要的，但是如果你可以改变你的 HTML 结构，那么它会很容易，所以我可以看到你在桌面上的右侧 div 有问题并在移动设备上订购按钮 div。这是解决方案。

.borderName {
  display: flex;
  flex-wrap: wrap;
}

.borderCountries {
  width: 100%;
  order: 2;
}
.countryName, .domain {
  width: 50%;
}

@media(max-width: 375px){
  .borderName {
    flex-direction: column;
  }
}
<div class="borderName">
                    <div class="countryName">
                        <div className="NativeName">
                            <h1 className="Country">{country.name}</h1>
                            <h2>Native Name:</h2>
                            <p> {country.nativeName}</p>
                            <br />
                            <h2>Population:</h2>
                            <p> {country.population}</p>
                            <br />
                            <h2>Region:</h2>
                            <p> {country.region}</p>
                            <br />
                            <h2>Sub Region:</h2>
                            <p> {country.subregion}</p>
                            <br />
                            <h2>Capital:</h2>
                            <p> {country.capital}</p>
                            <br />
                        </div>
                    </div>
                    <div class="borderCountries">
                        <h2>Border Countries:</h2>{country.borders
                        ? country.borders.map((border) => (
                        <button className="myButton" onClick={()=> {
                            fetchItem(border);
                            history.push(`/DetailCard/${border}`);
                            }}
                            >
                            {border}
                        </button>
                        )):null}
                    </div>
                    <div class="domain">
                      <h2>Top Level Domain: </h2>
                      <p>{country.topLevelDomain}</p>
                      <br />
                      <h2>Currencies: </h2>
                      <p>{country.currencies && country.currencies.map(({ name }) => name).join(", ")}</p>
                      <br />
                      <h2>Languages: </h2>
                      <p>{country.languages && country.languages.map(({ name }) => name).join(", ")}</p>
                      <br />
                    </div>
                </div>

工作codepen示例在这里，您可以在其中增加和减小屏幕尺寸。

如果我弄错了什么，请纠正我，我很乐意提供帮助。

推荐阅读