Question

我正在尝试将“注册”定位为图片＃1 ......但我唯一得到的是图片＃2。

照片＃2就像我们在flexbox中所知道的那样，我们为什么要让网站做出响应，而我所做的第一个网站（图片＃1）没有响应。

我不知道是否应该将“col-”类混淆到我的flexbox代码或者什么。这两张照片都是桌子。当视口减少时，flexbox中的那个工作正常。我正在使用媒体查询来响应，纯CSS。不使用框架。

如何在保持一切响应的同时自由定位Flexbox中的任何内容，如果我使用填充和边距定位元素，我将无法在其中放置任何其他内容。

This is what I want: (not a flexbox)
This is the most I can get to it: (inside the flexbox)

** pic＃2的CSS代码（flexbox childs）：**

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /

RewriteCond %{HTTP_USER_AGENT} "android|blackberry|googlebot-mobile|iemobile|iphone|ipod|#opera mobile|palmos|webos" [NC]
RewriteCond %{HTTP_USER_AGENT} "acs|alav|alca|amoi|audi|aste|avan|benq|bird|blac|blaz|brew|cell|cldc|cmd-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "dang|doco|eric|hipt|inno|ipaq|java|jigs|kddi|keji|leno|lg-c|lg-d|lg-g|lge-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "maui|maxo|midp|mits|mmef|mobi|mot-|moto|mwbp|nec-|newt|noki|opwv" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "palm|pana|pant|pdxg|phil|play|pluc|port|prox|qtek|qwap|sage|sams|sany" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "sch-|sec-|send|seri|sgh-|shar|sie-|siem|smal|smar|sony|sph-|symb|t-mo" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "teli|tim-|tosh|tsm-|upg1|upsi|vk-v|voda|w3cs|wap-|wapa|wapi" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "wapp|wapr|webc|winw|winw|xda|xda-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "up.browser|up.link|windowssce|iemobile|mini|mmp" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "symbian|midp|wap|phone|pocket|mobile|pda|psp" [NC]
RewriteCond %{QUERY_STRING} !(^|&)mobile=1(&|$) [NC]
RewriteRule ^(.*)?$ %{REQUEST_URI}?mobile=1 [L,QSA,R]

RewriteRule ^index\.php$ - [L]

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

</IfModule>
# END WordPress

Answer 1

这样的事情，我从头开始写的并没有让它完全相同，但我相信结构应该足够

第一张图片（要获得完整的响应式效果，您需要在顶行设置媒体查询并更改justify-content: flex-start;）

https://jsfiddle.net/suunyz3e/1450/

HTML：

<div class="column rows-container">
<div  class="top-row row">
<div>
  <span>Register?</span>
</div>
<div>
  <span>Help Contact</span>
</div>

</div>
<div class="bottom-row row" >
  <div>
    <input type="text" placeholder="email">
  </div>
  <div>
     <input type="text" placeholder="password">
  </div>
</div>

</div>

的CSS：

.register-box{
  display:inline-flex;
  color:#fff;
  background-color:#111;
  padding-top: 5px;
  padding-bottom: 5px; 
}
.register-box .register-title{
  margin-left:20px;
  font-weight:bold;
}
.column{
  display:flex;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-direction: normal;
}
.rows-container{
    flex-wrap:wrap;
    display:inline-flex;
    color:#fff;
    background-color:#111;
    padding-top: 5px;
    padding-bottom: 5px;
}
.row{
  display:flex;
  -webkit-box-orient: horizontal;
  -webkit-flex-direction: row;
  flex-direction: row;
}

.top-row{
 flex-wrap:wrap;
 justify-content: space-between;
 padding-bottom:12px;
}
.top-row span{
  padding-right:10px;
  font-size:14px;
  font-weight:bold;
  display:block;
  line-height:11px;
}
.bottom-row{
  flex-wrap:wrap;
  margin-right: 25px;
  margin-left:65px;
}

第二张图片

https://jsfiddle.net/suunyz3e/1448/

HTML：

<div class="register-box column">
  <div class="top-row row">
      <div>
          <span class="register">register?</span>
      </div>
      <div>
        <span class="contact">help contact </span>
      </div>
  </div>
   <div class="bottom-row row">
      <div>
        <input type="text" placeholder="email">
      </div>
      <div>
       <input type="text" placeholder="password">
      </div>
      <div>
       <button>
       login
       </button>
      </div>
  </div>
</div>

的CSS：

.register-box{
  background-color:#111;
  padding-top: 10px;
  padding-bottom: 10px;
 }

.column{
  display:flex;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-direction: normal;
}

.row{
  display:flex;
  -webkit-box-orient: horizontal;
  -webkit-flex-direction: row;
  flex-direction: row;
}

.register-box .top-row{
  flex-wrap:wrap;
  color:#fff;
  text-transform: capitalize;
  padding: 0px 18px 5px 12px;
  justify-content: space-between;
}
.register-box .top-row .register{
      font-weight: bold;
}
.register-box .top-row .contact{
         font-size: 14px;
         line-height:11px;
         font-weight: bold;
         display: block;
}

.register-box .bottom-row{
  flex-wrap:wrap;
  padding: 0px 18px 0px 12px;
}

.register-box .bottom-row input{
  margin-right:5px;
}

如何在Flex容器中定位-THIS-？

1 个答案: