Home Php C# Sql C C++ Javascript Python Java Go Android Git Linux Asp.net Django .net Node.js Ios Xcode Cocoa Iphone Mysql Tomcat Mongodb Bash Objective-c Scala Visual-studio Apache Elasticsearch Jar Eclipse Jquery Ruby-on-rails Ruby Rubygems Android-studio Spring Lua Sqlite Emacs Ubuntu Perl Docker Swift Amazon-web-services Svn Html Ajax Xml Java-ee Maven Intellij-idea Rvm Macos Unix Css Ipad Postgresql Css3 Json Windows-server Vue.js Typescript Oracle Hibernate Internet-explorer Github Tensorflow Laravel Symfony Redis Html5 Google-app-engine Nginx Firefox Sqlalchemy Lucene Erlang Flask Vim Solr Webview Facebook Zend-framework Virtualenv Nosql Ide Twitter Safari Flutter Bundle Phonegap Centos Sphinx Actionscript Tornado Register | Login | Edit Tags | New Questions | 繁体 | 简体


10 questions online user: 11

0
votes
answers
35 views
+10

如何檢測夜間模式事件 - JavaScript?

0

是否有任何用於改變模式時觸發的夜間模式或javascript事件的CSS前綴?如果用戶啓用夜間模式,我需要元素的自定義顏色。如何檢測夜間模式事件 - JavaScript?

另外如何觸發夜間模式事件像Twitter呢?

感謝

+0

沒有它不是,如果用戶能夠從瀏覽器夜間模式設置 –

沙发
0
0

因爲「夜間模式」,將不僅涉及改變背景顏色,而且字體顏色(加上可能有很多其他的事情)我會推薦一個解決方案,如本:

例如HTML:現在

<body class="night"> 

,在標準模式下body標籤不會有night類默認,但你會通過撥動類福添加此比如jQuery的toggleClass

然後在CSS這樣做...

CSS:

body { 
    color: #000; 
    background-color: #fff; 
} 

body.night { 
    color: #fff; 
    background-color: #000;  
} 

注:僅作爲舉例,請不要在黑色背景上用白色文本:)

現在,當班級切換並添加night類時,所有顏色都會改變,頁面將處於「夜間」模式。

不確定您是否還想要在頁面刷新/導航期間使此模式「粘」的說明;如果是這樣的話,那麼最好在sessioncookie的情況下處理,因爲這會在瀏覽器關閉時過期。

+0

但是,如何檢測用戶改變國防部工作e? –

+0

沒有檢測,只有一個功能。可以初始化'darkmode.css'的**按鈕**或**撥號器**(例如)。我通過創建一個'jQuery'函數來實現,當用戶想要啓用'Dark Mode'時,''link type =「stylesheet」href =「darkmode.css>」'到''標籤。但這**不是非常有效,因爲瀏覽器不保存用戶首選項(不啓用緩存)。 –

+0

@IsmailFarooq你是什麼意思「發現」 - 你的意思是我在最後一句話中談論的是什麼?在用戶切換到網站後,確保在網站導航過程中保持夜間模式不變? – Brett

板凳
0
0

有一個CSS濾鏡,我不知道,Twitter的使用是這樣的(沒有圖像倒置只有文本和背景

注1:你可以降低翻轉過濾器的指數,爲前:0.8 注2:不支持IE :(但支持EDGE它

$('button').on('click', function(){ 
 
    $('.wrap').toggleClass('day night') ; 
 
});
.wrap{ 
 
    background: white; 
 
} 
 
.day{ 
 
    filter: invert(0); 
 
} 
 

 
.night{ 
 
    filter: invert(1); 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="wrap day"> 
 
    <img src="https://placeimg.com/200/150/any" /> 
 

 
    <p>Lorem ipsus </p> 
 
    <button>Day/night</button> 
 
    
 
</div>

+0

其實我的主要問題是如何檢測用戶啓用夜間模式或不是 –

+0

在Twitter上具體您認爲? –

+0

手機瀏覽器上有一個選項,尤其是「啓用夜間模式」我想跟蹤該選項是否有任何事件呢? –

0
votes
answers
76 views
+10

jquery移動更改複選框顏色

0

當選中其他顏色時,如何更改複選框顏色(藍色)和複選框圖標顏色(白色)。jquery移動更改複選框顏色

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
 
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> 
 
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
 

 
    <form> 
 
     <label> 
 
      <input type="checkbox" name="checkbox-0 ">Check me 
 
     </label> 
 
    </form>

+0

雖然改變背景顏色是微不足道的CSS,爲圖標的顏色有兩種顏色集:*白色*和*黑*。您可以通過應用「ui-alt-icon」類來顯示*黑色*圖標。您無法着色圖標,因爲圖標圖像未內聯。以下是替代圖標集的參考資料:http://demos.jquerymobile.com/1.4.5/icons/ – deblocker

沙发
0
0

對於藍色:

.ui-btn.ui-checkbox-on.ui-btn-a:after { 
    background-color: red !important; 
} 

白色的圖標是一個SVG:

.ui-icon-check:after { 
    background-image: url(newicon.svg); 
} 
板凳
0
0

所有你需要做的是確定所使用的類由jquery。之後,你可以簡單地套用屬性這樣

.ui-btn.ui-checkbox-on:after { 
 
    background-color: red !important; 
 
} 
 

 
.ui-btn.ui-checkbox-off:after { 
 
    background-color: blue !important; 
 
}
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
 
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> 
 
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
 

 
<form> 
 
    <label> 
 
      <input type="checkbox" name="checkbox-0 ">Check me 
 
     </label> 
 
</form>

0
votes
answers
56 views
+10

div`s CSS轉換問題之間的鍵盤導航

2

我正在轉換div之間的CSS轉換,它將用作無鼠標應用程序的標頭。過渡給人感覺兩個相鄰元素之間的「流動」。 你可以在這裏看到我迄今爲止所做的工作:https://codepen.io/anon/pen/GOWVGR。元素的焦點使用左側的'a'鍵和右側的's'鍵進行控制。div`s CSS轉換問題之間的鍵盤導航

我幾乎使它的工作使用漸變和背景位置過渡,除了我不知道如何編碼只向一個方向移動時的效果,前一個元素「背景」返回到初始背景位置而不是「跟隨」新選擇的div背景位置。

.left, .right { 
    background-size: 202% 100%; 
    background-image: linear-gradient(to right, transparent 50%,green 50%); 
    -webkit-transition: background-position .3s ease-in-out; 
    -moz-transition: background-position .3s ease-in-out; 
    transition: background-position .3s ease-in-out; 
} 

.left:focus { 
    background-position: 100% 0; 
} 

.right:focus { 
    background-position: -100% 0; 
} 

所需的效果只在一種情況下「工作」,如果按右 - 左(S - A)或左右(一 - S)在我創建了演示。我還添加了以下圖像,以便更容易理解所需的效果。 Desired flow of menu

任何想法將非常感激!謝謝!

+0

你有結束元素,它沒有返回的第一個元素,反之亦然有問題嗎?或者當你在一個方向上單擊多次時,是否對轉換有問題? – 1stthomas

+0

嗨托馬斯,當我點擊多個時間點擊一個方向時,我遇到了「無焦點」元素轉換的問題。 – Dragos

沙发
0
0

我設法創建大多數使用JavaScript的動畫。該代碼將以下「animatedBg」CSS類添加到當前元素和以前的元素,並修改兩個元素的背景位置,從而實現我要求的動畫效果。

我現在需要找到一種方法來保持動畫的流暢性,當按住方向按鈕時。

可以使用左右箭頭測試波紋管片段。

document.getElementById("1").focus(); 
 
var current = 0; 
 
var cls = "right"; 
 

 
var positions = [-100, "x", "x", "x" , "x"]; 
 
updateItems(); 
 
addEventListener("keydown", function (event) { 
 
    if (event.keyCode === 37) { 
 
     if (current === 0) { 
 
      return; 
 
     } 
 
     current--; 
 

 
     var newPositions = ["x", "x", "x", "x" , "x"];; 
 
     if (cls === "left") { 
 
      newPositions[current] = 100; 
 
     } else { 
 
      if (positions[current] !== 0) { 
 
       newPositions[current] = -100; 
 
      } else { 
 
       newPositions[current] = 100; 
 
      } 
 
     } 
 
     newPositions[current + 1] = positions[current + 1] + 100; 
 
     cls = "left"; 
 
     positions = newPositions; 
 

 
    } 
 
    if (event.keyCode === 39) { 
 
     if (current === 4) { 
 
      return; 
 
     } 
 
     current++; 
 
     var newPositions = ["x", "x", "x", "x" , "x"]; 
 
     if (cls === "right") { 
 
      newPositions[current] = -100; 
 
     } else { 
 
      if (positions[current] !== 0) { 
 
       newPositions[current] = 100; 
 
      } else { 
 
       newPositions[current] = -100; 
 
      } 
 
     } 
 
     newPositions[current - 1] = positions[current - 1] - 100; 
 
     cls = "right"; 
 
     positions = newPositions; 
 
    } 
 
    updateItems(); 
 
}); 
 

 
function updateItems() { 
 
    for (var i = 0; i < 5; i++) { 
 
     var element = document.getElementById("" + i); 
 

 
     if(positions[i] === "x") { 
 
      if (element.classList.contains("animatedBg")){ 
 
       element.classList.remove("animatedBg"); 
 
      } 
 
      element.style.backgroundPosition = "0 0"; 
 
     } 
 
     if (positions[i] !== "x") { 
 
      if(!element.classList.contains("animatedBg")){ 
 
       element.classList.add("animatedBg"); 
 
      } 
 
      element.style.backgroundPosition = positions[i] + "% 0"; 
 
     } 
 
    } 
 
}
body { 
 
    width: 100%; 
 
    margin: 0; 
 
    overflow-x: hidden; 
 
} 
 

 
.container { 
 
    height: 140px; 
 
    display: flex; 
 
    background-color: rgba(0,0,0,0.8); 
 
    z-index: 1000; 
 
    position: absolute; 
 
    width: 100%; 
 
} 
 

 
.item { 
 
    height: 60px; 
 
    padding: 60px 0px 20px; 
 
} 
 

 
.item a { 
 
    color: white; 
 
    font-size: 25px; 
 
    text-decoration: none; 
 
    padding: 20px; 
 
    outline: 0px; 
 
} 
 

 
.animatedBg { 
 
    background-size: 200% 100%; 
 
    background-image: linear-gradient(to right, transparent 51%,green 50%); 
 
    -webkit-transition: background-position .2s ease-in-out; 
 
    -moz-transition: background-position .2s ease-in-out; 
 
    transition: background-position .2s ease-in-out; 
 
}
<div class="container"> 
 
	 <div class="item"> 
 
	 	 <a id="0" class="animatedBg" href="/1" tabindex="-1">1</a> 
 
	 </div> 
 
	 <div class="item"> 
 
	 	 <a id="1" class="" href="/2" tabindex="-1">22</a> 
 
	 </div> 
 
	 <div class="item"> 
 
	 	 <a id="2" class="" href="/3" tabindex="-1">333</a> 
 
	 </div> 
 
    <div class="item"> 
 
	 	 <a id="3" class="" href="/4" tabindex="-1">4444</a> 
 
	 </div> 
 
    <div class="item"> 
 
	 	 <a id="4" class="" href="/3" tabindex="-1">55555</a> 
 
	 </div> 
 
</div>

0
votes
answers
49 views
+10

不能得到:轉換到工作

0

我似乎無法得到不透明轉換工作在:僞元素之後,但在:before元素上的相同轉換完全正常工作。任何幫助表示讚賞!不能得到:轉換到工作

.top-nav li a:hover:after { 
    content: "/"; 
    display: inline-block; 
    opacity: 1; 
    transition: opacity 0.2s; 
    margin-left: 10px; 
} 

.top-nav li a:after { 
    content: "/"; 
    display: inline-block; 
    opacity: 0; 
    transition: opacity 0.2s; 
    margin-left: 10px; 
    position: absolute; 
} 

.top-nav li a:hover:before { 
    content: "/"; 
    display: inline-block; 
    opacity: 1; 
    transition: opacity 0.2s; 
    margin-right: 10px; 
} 

.top-nav li a:before { 
    content: "/"; 
    display: inline-block; 
    opacity: 0; 
    transition: opacity 0.2s; 
    margin-right: 10px; 
} 
+0

在我的測試使用CSS都:之前和:轉換工作後。必須發揮其他一些因素。一種可能性是相鄰的按鈕位於較高的z-索引處,並且在內容之後遮蔽:。你能製作一個簡化的測試用例來重新創建這個bug嗎?看到控制導航佈局的CSS和HTML標記會很有幫助。 –

+0

這裏是一個小提琴,展示了我在之前的評論中描述的重疊可能性:https://jsfiddle.net/k9euprr4/請注意第三和第四列表項目如何掩蓋他們的鄰居。在僞內容仍然存在之後,它只是隱藏在相鄰按鈕後面。 –

沙发
0
1

它的工作儘量給寬度李然後它會顯示

.top-nav li a:hover:after { 
 
    content: "/"; 
 
    display: inline-block; 
 
    opacity: 1; 
 
    transition: opacity 2s; 
 
    margin-left: 10px; 
 
    
 
} 
 

 
.top-nav li a:after { 
 
    content: "/"; 
 
    display: inline-block; 
 
    opacity: 0; 
 
    transition: opacity 0.2s; 
 
    margin-left: 10px; 
 
    position: absolute; 
 
} 
 

 
.top-nav li a:hover:before { 
 
    content: "/"; 
 
    display: inline-block; 
 
    opacity: 1; 
 
    transition: opacity 0.2s; 
 
    margin-right: 10px; 
 
} 
 

 
.top-nav li a:before { 
 
    content: "/"; 
 
    display: inline-block; 
 
    opacity: 0; 
 
    transition: opacity 0.2s; 
 
    margin-right: 10px; 
 
} 
 

 
.top-nav { 
 
    list-style: none; 
 
} 
 
.top-nav li { 
 
    float: left; 
 
    position: relative; 
 
    background:white; 
 
    width:85px; 
 
    text-align:center; 
 
}
<ul class="top-nav"> 
 
<li><a href="#">One</a></li> 
 
<li><a href="#">Two</a></li> 
 
<li><a href="#">Three</a></li> 
 
<li><a href="#">Four</a></li> 
 
</ul>

0
votes
answers
53 views
+10

如何在使用flex時在Jumbotron中垂直居中放置物品?

-1

我在超大屏幕嘗試過這種垂直中心的所有項目,如何在使用flex時在Jumbotron中垂直居中放置物品?

display: flex; 
justify-content: center; 
align-items: center; 

但問題是所有項目都在單行列隊像他們顯示在線。你如何垂直居中,同時仍然以塊形式顯示它們。

+0

你能否提供你的代碼給jumbotron。我不明白爲什麼你的內容不會爲了jumbotron在頂部和底部應用相同數量的填充而垂直居中。 – Klooven

+0

@Klooven請再次閱讀我的問題,你會明白。 – CodeMan

沙发
0
0

由於block元素垂直堆疊,因此將flex方向更改爲,flex元件也會如此。

display: flex; 
flex-direction: column;    /* added */ 
justify-content: center; 
align-items: center; 
0
votes
answers
27 views
+10

CSS 3佈局3列在1行

1

我有一行在哪裏填充3列並排像this。問題是當我選擇一個JSON節點時,它將通過添加一個額外的div來填充樹的路徑。因此我的桌子有點像thisCSS 3佈局3列在1行

這是我的HTML和CSS代碼:

.Row 
 
{ 
 
    display: table; 
 
    width: 100%; 
 
    height: 500px; 
 
    table-layout: fixed; /*Optional*/ 
 
    border-spacing: 10px; /*Optional*/ 
 
} 
 
.Column 
 
{ 
 
    display: table-cell; 
 
    height: 400px; 
 
    position: static; 
 
} 
 
.jsoneditor-outer.has-nav-bar { 
 
    height: 500px; 
 
} 
 
json-editor{ 
 
    height: 500px; 
 
}
<div class="Row"> 
 
    <div class="Column"><json-editor [options]="editorOptions" [data]="data" ></json-editor></div> 
 
    <div class="Column"><json-editor [options]="editorOptions" [data]="data" ></json-editor></div> 
 
    <div class="Column"><json-editor [options]="editorOptions" [data]="data" ></json-editor></div> 
 
</div>

+0

你必須提供沒有工作代碼的工作代碼我無法解決你的問題 –

沙发
0
0

與此更改上面的CSS代碼:

.Row 
{ 
    display: flex; 
    width: 100%; 
    min-height: 500px; 
    justify-content: stretch; 
} 
.Column { 
    min-height: 400px; 
    width: 33.3%; 
} 
.jsoneditor-outer.has-nav-bar { 
    min-height: 500px; 
} 
json-editor{ 
    min-height: 500px; 
} 

希望,它將工作...

0
votes
answers
42 views
+10

使彈性項目展開懸停,縮小其兄弟姐妹

1

我試圖解決flexbox問題,我想每行有三個div,首先大小相等,但是當懸停div時,該增長和其他的在同一行收縮。以爲我已經解決了它,直到我嘗試了多行。使彈性項目展開懸停,縮小其兄弟姐妹

我想要的是當懸停第三個div時,它會縮小第一個和第二個div,並保持其餘不變。我無法弄清楚這一部分。

以下是我的單排工作解決方案。

此佈局是否也可以在多行上工作?

我是否必須將每行包裝在單獨的容器中,還是有辦法解決這個問題?

.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    width: 100%; 
 
} 
 

 
.box { 
 
    width: 33%; 
 
    flex: 1; 
 
} 
 

 
.box:hover { 
 
    flex-grow: 3; 
 
}
<div class="container"> 
 
    <div class="box"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
 
     ut labore et dolore magna aliqua. </p> 
 
    </div> 
 

 
    <div class="box"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
 
     ut labore et dolore magna aliqua. </p> 
 
    </div> 
 

 
    <div class="box"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
 
     ut labore et dolore magna aliqua. </p> 
 
    </div> 
 
</div>

See it on CodePen

+0

你只想要第二列到懸停成長? – Kushtrim

+0

說我有6個盒子的div(每行3行2列),我把第二個div懸停,我想第二個div擴大,div 1&3縮小,而div 4-6保持不變。 – yayheartbeat

+0

這或多或少是不可能的,主要是因爲你需要檢測哪個行是histed元素,然後只在該行上增長/縮小元素,並且_previous sibling_沒有選擇器。 – LGSon

沙发
0
0

我已經盡了全力,讓他們在同一容器中排列,但他們似乎並不適合那裏。你最好把它們放在不同的容器中。

由此,他們會看起來不錯,如果您需要分開申請,您可以做一些簡單的風格。

這裏是Fiddle

.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    width: 100%; 
 
    justify-content: space-between; 
 
} 
 

 
.box { 
 
    width: 30%; 
 
    flex: 1 1 2%; 
 
    transition: all 0.3s ease-in-out; 
 
} 
 

 
.box:hover { 
 
    flex-grow: 2; 
 
}
<div class="container"> 
 
    <div class="box"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
 
     ut labore et dolore magna aliqua. </p> 
 
    </div> 
 

 
    <div class="box"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
 
     ut labore et dolore magna aliqua. </p> 
 
    </div> 
 

 
    <div class="box"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
 
     ut labore et dolore magna aliqua. </p> 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 
    <div class="box"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
 
     ut labore et dolore magna aliqua. </p> 
 
    </div> 
 

 
    <div class="box"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
 
     ut labore et dolore magna aliqua. </p> 
 
    </div> 
 

 
    <div class="box"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
 
     ut labore et dolore magna aliqua. </p> 
 
    </div> 
 
</div>

板凳
0
0

我一定要包中的每一行單獨的容器或者是有沒有辦法解決此問題的方法?

您需要將每行包裝在單獨的容器中。

由於包裝已啓用,因此無法使用彈性盒進行佈局。

這意味着單行中的項不能被展開,同時收縮其同胞而不觸發包裝。 當他們可以包裝時,沒有什麼可以迫使兄弟姐妹縮小。

沒有flex-wrap: wrap行長度有硬限制。然後,您可以在懸停時給予任意長度的物品(在我的示例中,我使用flex-basis: 100%),並且可以在縮小其兄弟的同時擴大其範圍,而無任何包裝問題。

.container { 
 
    display: flex; 
 
} 
 

 
.box { 
 
    flex-basis: 33.33%; 
 
} 
 

 
.box:hover { 
 
    flex-basis: 100%; 
 
} 
 

 

 
/* for demo only */ 
 
.box { 
 
    transition: .5s; 
 
    border: 1px dashed red; 
 
    box-sizing: border-box; 
 
}
<div class="container"> 
 
    <p class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut la bore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
 
    ut labore et dolore magna aliqua. </p> 
 
    <p class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
 
    ut labore et dolore magna aliqua. </p> 
 
    <p class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
 
    ut labore et dolore magna aliqua. </p> 
 
</div> 
 

 
<div class="container"> 
 
    <p class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut la bore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
 
    ut labore et dolore magna aliqua. </p> 
 
    <p class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
 
    ut labore et dolore magna aliqua. </p> 
 
    <p class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
 
    ut labore et dolore magna aliqua. </p> 
 
</div>

0
votes
answers
49 views
+10

CSS:Flex正在調整下一行div的大小

0

我的問題是,無論何時調整窗口大小,如果沒有與所有其他div的大小相同的大小,div應該跳到下一行。CSS:Flex正在調整下一行div的大小

在「整頁」中查看此內容並嘗試調整自己的大小。

<html> 
 
<body> 
 
    <div id="wrapper" style="display: flex; width: 100%; flex-wrap: wrap; justify-content: center;"> 
 
    <div id="content" style="display: inline-block; flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;"> 
 
     Hey! 
 
    </div> 
 
    <div id="content" style="display: inline-block; flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;"> 
 
     Hey! 
 
    </div> 
 
    <div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;"> 
 
     Hey! 
 
    </div> 
 
    <div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;"> 
 
     Hey! 
 
    </div> 
 
    <div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;"> 
 
     Hey! 
 
    </div> 
 
    <div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;"> 
 
     Hey! 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

這是應該的樣子: Image

+1

[相等寬度撓曲項目甚至船尾呃他們換行](https://stackoverflow.com/q/44154580/3597276) –

沙发
0
1

他們不能對第二排同樣大小與給定的設置。

而原因是,當你設置flex: 13px,這意味着flex: 1 1 13px,因此他們會成長,如果有剩餘空間,直到他們到達max-width,以及何時空間不大,他們會收縮,直到到達min-width

也沒有可能檢測項目換行的時間,因此要保持min/max-width概念,您需要添加幾個媒體查詢。

注意,在CSS中使用的!important需要重寫250px

Fiddle demo

棧的內聯值片斷

body { 
 
    margin: 0; 
 
} 
 
#wrapper div { 
 
    box-sizing: border-box; 
 
} 
 
@media (max-width: 900px) { 
 
    #wrapper div:nth-child(6) {    /* 6th child */ 
 
    max-width: calc(100%/5) !important; 
 
    } 
 
} 
 
@media (max-width: 750px) { 
 
    #wrapper div:nth-child(n+5) {    /* from 5th child */ 
 
    max-width: calc(100%/4) !important; 
 
    } 
 
} 
 
@media (max-width: 600px) {     /* from 4th child */ 
 
    #wrapper div:nth-child(n+4) { 
 
    max-width: 250px !important; 
 
    } 
 
}
<div id="wrapper" style="display: flex; width: 100%; flex-wrap: wrap; justify-content: center;"> 
 
    <div id="content1" style="display: inline-block; flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;"> 
 
     Hey! 
 
    </div> 
 
    <div id="content2" style="display: inline-block; flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;"> 
 
     Hey! 
 
    </div> 
 
    <div id="content3" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;"> 
 
     Hey! 
 
    </div> 
 
    <div id="content4" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;"> 
 
     Hey! 
 
    </div> 
 
    <div id="content5" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;"> 
 
     Hey! 
 
    </div> 
 
    <div id="content6" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;"> 
 
     Hey! 
 
    </div> 
 
    </div>

板凳
0
1

變化justify-contentcenterflex-start#wrapper這是在默認情況下是flex-start,然後將它對準孩子divsleft每用戶調整大小的時間。

<div id="wrapper" style="display: flex; width: 100%; flex-wrap: wrap; justify-content:flex-start;"> 
 
    <div id="content" style="display: inline-block; flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;"> 
 
     Hey! 
 
    </div> 
 
    <div id="content" style="display: inline-block; flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;"> 
 
     Hey! 
 
    </div> 
 
    <div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;"> 
 
     Hey! 
 
    </div> 
 
    <div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;"> 
 
     Hey! 
 
    </div> 
 
    <div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;"> 
 
     Hey! 
 
    </div> 
 
    <div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;"> 
 
     Hey! 
 
    </div> 
 
    </div>

+1

OP不要求左對齊,他們要求相等的寬度,這也是與張貼的圖像顯示。 – LGSon

+1

是的@LGSon再次閱讀,OP必須糾正我,這不是我想要的。 +1從您的解決方案中學到了新東西。 – frnt

地板
0
0

div刪除flex: 13px;。另外,您對所有div都使用相同的id,請刪除它。我用class代替。

下面是解決

  #wrapper { 
 
      display: flex; 
 
      width: 100%; 
 
      flex-wrap: wrap; 
 
      justify-content: center; 
 
      } 
 
      .content { 
 
      text-align: center; 
 
      background-color: red; 
 
      border: 3px solid grey; 
 
      height: 200px; 
 
      min-width: 150px; 
 
      max-width: 250px; 
 
      }
<html> 
 
     <head> 
 
     </head> 
 
     <body> 
 
     <div id="wrapper"> 
 
      <div class="content">Hey!</div> 
 
      <div class="content">Hey!</div> 
 
      <div class="content">Hey!</div> 
 
      <div class="content">Hey!</div> 
 
      <div class="content">Hey!</div> 
 
      <div class="content">Hey!</div> 
 
      <div class="content">Hey!</div> 
 
      <div class="content">Hey!</div> 
 
     </div> 
 
     </body> 
 
    </html>

+0

現在它們不再彎曲,寬度在150px - 250px之間。 – LGSon

0
votes
answers
61 views
+10

CSS網格不能按預期工作

0

有人能幫我弄清楚爲什麼下面的CSS網格示例不能按預期工作?這裏有一個鏈接到Codepen:CSS網格不能按預期工作

https://codepen.io/Nekto/pen/yPpaBE

.cards { 
     margin: 0; 
     padding: 1em; 
     display: grid; 
     grid-template-columns: 1fr 1fr 1fr; 
     grid-gap: 20px; 
     grid-template-areas: 
     "a a b" 
     "c d d" 
     "c e e"; 
    } 

.card { 
    background-color: #1E88E5; 
    padding: 2em; 
    color: #FFFFFF; 
    line-height: 1.4; 
    border-radius: 4px; 
} 

.card1 { grid-area: "a"; } 
.card2 { grid-area: "b"; background-color: #4CAF50; } 
.card3 { grid-area: "c"; background-color: #FFCA28; } 
.card4 { grid-area: "d"; background-color: #F06292; } 
.card5 { grid-area: "e"; background-color: #FF8A80; } 

出於某種原因,電網區域不正確的結構。可能我忘了一些東西,但我無法弄清楚究竟是什麼。 任何幫助表示讚賞。謝謝!

+0

預期的結果是有放置在按照「併網卡模板區域「參數。例如,卡#1應該在第一行佔據2個列單元,卡#4應該包括第2行和第3行的第一列單元等。 – Nekto

+0

類似這樣的:http://prntscr.com/hc34gn – Nekto

沙发
0
3

剛從grid-area值刪除引號,它會工作得很好:

.card1 { grid-area: a; } 
.card2 { grid-area: b; background-color: #4CAF50; } 
.card3 { grid-area: c; background-color: #FFCA28; } 
.card4 { grid-area: d; background-color: #F06292; } 
.card5 { grid-area: e; background-color: #FF8A80; } 

body { 
 
    text-align: center; 
 
} 
 

 
.wrap { 
 
    max-width: 70em; 
 
    text-align: left; 
 
    margin: 0 auto; 
 
} 
 

 
.cards { 
 
    margin: 0; 
 
    padding: 1em; 
 
    display: grid; 
 
    grid-template-columns: 1fr 1fr 1fr; 
 
    grid-gap: 20px; 
 
    grid-template-areas: 
 
    "a a b" 
 
    "c d d" 
 
    "c e e"; 
 
} 
 

 
.card { 
 
    background-color: #1E88E5; 
 
    padding: 2em; 
 
    color: #FFFFFF; 
 
    line-height: 1.4; 
 
    border-radius: 4px; 
 
    
 
    h3 { 
 
    margin-top: 0; 
 
    } 
 
} 
 

 
.card1 { grid-area: a; } 
 
.card2 { grid-area: b; background-color: #4CAF50; } 
 
.card3 { grid-area: c; background-color: #FFCA28; } 
 
.card4 { grid-area: d; background-color: #F06292; } 
 
.card5 { grid-area: e; background-color: #FF8A80; }
<div class="wrap"> 
 
    <div class="cards"> 
 
    <div class="card card1"><h3>Card 1</h3>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</div> 
 
    <div class="card card2"><h3>Card 2</h3>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution.</div> 
 
    <div class="card card3"><h3>Card 3</h3>At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring. Capitalize on low hanging fruit to identify a ballpark value added activity to beta test.</div> 
 
    <div class="card card4"><h3>Card 4</h3>Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution.</div> 
 
    <div class="card card5"><h3>Card 5</h3>Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. Bring to the table win-win survival strategies to ensure proactive domination.</div> 
 
    </div> 
 
</div>

+2

另外, grid-template-columns變得沒用,因爲grid-template-areas接管並且實際上做了網格佈局描述https://codepen.io/anon/pen/qVprPO –

+2

@G-Cyr,實際上是'grid-template-columns'仍然重要並且有所作爲。使用'1fr 1fr 1fr'這些列均勻地分配行中的空間。沒有它,這些列將解析爲「自動」寬度,這會呈現不同的佈局。 –

+1

@Michael_B你是對的! :) –

0
votes
answers
27 views
+10

如何使用浮動div來定位一組div下面的CSS框?

0

我有兩個div s(橙色和藍色)的浮動左側和右側固定大小的中間div(綠色),這是應該擴大到底部的工作佈局。如何使用浮動div來定位一組div下面的CSS框?

現在,我想添加一個頁腳(紅色),顯示在以上div s的最高點下方,但我只能看到它顯示在中間div以下,如下所示。

我試過overflow: auto,但它沒有效果。

<div style="float: left;width: 100px;border-style: solid;border-color: orange;"> 
 
left floating left floating left floating left floating left floating left floating left floating left floating left floating left floating left floating left floating left floating left floating left floating left floating left floating left floating left floating 
 
</div> 
 
<div style="float: right;border-style: solid;border-color: blue;"> 
 
right floating right floating right<br/> 
 
floating right floating right <br/> 
 
floating right floating right <br/> 
 
floating right floating right <br/> 
 
floating right floating right <br/> 
 
floating right floating right <br/> 
 
floating 
 
</div> 
 
<div style="layout:block;border-style: solid;border-color: green;"> 
 
middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle 
 
</div> 
 
<div style="display:block;border-style: solid;border-color: red;"> 
 
footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer 
 
</div>

沙发
0
1

添加clear: both到紅格。

<div style="float: left;width: 100px;border-style: solid;border-color: orange;"> 
left floating left floating left floating left floating left floating left floating left floating left floating left floating left floating left floating left floating left floating left floating left floating left floating left floating left floating left floating 
</div> 
<div style="float: right;border-style: solid;border-color: blue;"> 
right floating right floating right<br/> 
floating right floating right <br/> 
floating right floating right <br/> 
floating right floating right <br/> 
floating right floating right <br/> 
floating right floating right <br/> 
floating 
</div> 
<div style="layout:block;border-style: solid;border-color: green;"> 
middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle 
</div> 
<div style="display:block;border-style: solid;border-color: red;clear: both"> 
footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer 
</div> 

https://jsfiddle.net/6c4713ym/