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: 48

0
votes
answers
28 views
+10

將列表項目放在兩列中,移位50%

-1

我試圖將列表項放置在兩行中,以便從最下面一行的項目向右移動50%。該項目的順序也很重要,並應該像下面的圖片:將列表項目放在兩列中,移位50%

enter image description here

下面是代碼,我想出了:

https://codepen.io/Deka87/pen/qVgjGv

ul { 
 
    list-style: none; 
 
    padding-left: 0; 
 
    margin-bottom: 0; 
 
    column-count: 3; 
 
    column-width: 33.33%; 
 
} 
 
ul > li:nth-child(even) { 
 
    transform: translateX(50%); 
 
}
<ul> 
 
<li> 
 
    1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam id modi nostrum! Dolor cumque neque porro. Harum qui nobis sapiente nostrum est a quas, quaerat repudiandae minima, sed vel! 
 
</li> 
 
<li> 
 
    2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam id modi nostrum! Dolor cumque neque porro. Harum qui nobis sapiente nostrum est a quas, quaerat repudiandae minima, sed vel! 
 
</li> 
 
<li> 
 
    3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam id modi nostrum! Dolor cumque neque porro. Harum qui nobis sapiente nostrum est a quas, quaerat repudiandae minima, sed vel! 
 
</li> 
 
<li> 
 
    4. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam id modi nostrum! Dolor cumque neque porro. Harum qui nobis sapiente nostrum est a quas, quaerat repudiandae minima, sed vel! 
 
</li> 
 
<li> 
 
    5. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam id modi nostrum! Dolor cumque neque porro. Harum qui nobis sapiente nostrum est a quas, quaerat repudiandae minima, sed vel! 
 
</li> 
 
<li> 
 
    6. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam id modi nostrum! Dolor cumque neque porro. Harum qui nobis sapiente nostrum est a quas, quaerat repudiandae minima, sed vel! 
 
</li> 
 
</ul> 
 
<!--/.timeline-list -->

正如您所看到的,底部的移位項目會「截斷」在列中。任何想法如何解決這個問題,或者任何其他解決方案,讚賞。

+0

這聽起來像是你可以用flexboxwrap解決的問題,但第一個錯誤實際上是假設你想使它成爲33.3%28,57(在開始或結束時取半角元素。 (100/3,5)。 我會在做完其他事情之後再回來。 –

+0

@FelipeQuirós,謝謝!希望這個解決方案也考慮到物品的順序。 – sdvnksv

沙发
0
0

您可以使用CSS網格佈局,而不是

ul { 
 
    list-style: none; 
 
    padding-left: 0; 
 
    margin-bottom: 0; 
 
    display: grid; 
 
    grid-template-rows: repeat(2, 1fr); /* number of rows and space taken*/ 
 
    grid-gap: 20px; /* gap between each row and column*/ 
 
    grid-auto-flow: column; /* how the grid is going to flow */ 
 

 
} 
 

 
ul>li:nth-of-type(even) { 
 
    transform: translateX(50%); 
 
}
<ul> 
 
    <li> 
 
    1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam id modi nostrum! Dolor cumque neque porro. Harum qui nobis sapiente nostrum est a quas, quaerat repudiandae minima, sed vel! 
 
    </li> 
 
    <li> 
 
    2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam id modi nostrum! Dolor cumque neque porro. Harum qui nobis sapiente nostrum est a quas, quaerat repudiandae minima, sed vel! 
 
    </li> 
 
    <li> 
 
    3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam id modi nostrum! Dolor cumque neque porro. Harum qui nobis sapiente nostrum est a quas, quaerat repudiandae minima, sed vel! 
 
    </li> 
 
    <li> 
 
    4. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam id modi nostrum! Dolor cumque neque porro. Harum qui nobis sapiente nostrum est a quas, quaerat repudiandae minima, sed vel! 
 
    </li> 
 
    <li> 
 
    5. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam id modi nostrum! Dolor cumque neque porro. Harum qui nobis sapiente nostrum est a quas, quaerat repudiandae minima, sed vel! 
 
    </li> 
 
    <li> 
 
    6. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam id modi nostrum! Dolor cumque neque porro. Harum qui nobis sapiente nostrum est a quas, quaerat repudiandae minima, sed vel! 
 
    </li> 
 
</ul>

+0

對不起,但是項目的順序不是按照圖像 – sdvnksv

+0

啊,這在邊緣不起作用。看起來太好了,不真實:-( – sdvnksv

+0

最後用flex-wrap和order properties來得到結果,如果有人來的話 – sdvnksv

板凳
0
-1

由於CSS網格沒有被普遍接受,這是一個使用Flexbox的這所有的主流瀏覽器的解決方案。 像這樣劃分你的HTML,它會給你一個計算信息的有序方式。

<div class="parent"> 
    <div class="column"> 
     <div class="item">1. Lorem ipsum!</div> 
     <div class="item">2. Lorem ipsum!</div> 
    </div> 
    <div class="column"> 
     <div class="item">3. Lorem ipsum!</div> 
     <div class="item">4. Lorem ipsum!</div> 
     </div> 
    <div class="column"> 
     <div class="item">5. Lorem ipsum!</div> 
     <div class="item">6. Lorem ipsum!</div> 
    </div> 
</div> 

在此之後,使用Flexbox的使列和該列內的每個項目,給它的50%的寬度(它的父的50%)和100%轉化的偶數子(意味着它的寬度的100% )

.parent { 
    display: flex; 
    flex-flow: row nowrap; 
    width: 100%; 

    .column { 
     display: flex; 
     flex-flow: column nowrap; 
     width: 100%; 

     .item { 
      width: 50%; 
      &:nth-child(even) { 
       transform: translateX(100%); 
      } 
     } 
    } 
} 

您可以繼續向每列添加更多項目,而不會因此降低可讀性。

+0

對不起,但想法是有兩行在它們之間劃一條線。我應該提到這一點。在你的例子中,我將無法做到這一點。 – sdvnksv

0
votes
answers
44 views
+10

如何將文本放在HTML中的同一行上?

0

在學校我的地理課,我們在不同的國家和其中的一個選項進行演示是一個網站。我知道基本的html,但不是很多關於它的設計和顯示方面。現在,我在許多網站上看到了在同一行上獲取文本的許多麻煩。我的代碼目前看起來像這樣:如何將文本放在HTML中的同一行上?

<!DOCTYPE html> 
    <html> 
     <head> 
      <title>Swedish Political Geography</title> 
     </head> 
     <body> 
     <font face="verdana" size=「10」>Swedish Political Geography</font> 
     <ul class="navigation"> 
      <ul><font face="verdana" size=「10」>Borders</font></ul> 
      <ul><font face="verdana" size=「10」>Government</font></ul> 
     </ul> 
    </body> 
</html> 

我也一直有麻煩鏈接其他文件到此頁面。如果你能幫上忙,那將不勝感激。這是我一直在試圖爲代碼:

<a href="borders.html">Borders</a> 

我要指出,我一直在使用本地主機服務器來測試我的代碼,這是我怎麼會最終提出我的項目。

編輯:爲了澄清,我想瑞典政治地理學,邊框和政府都將在同一行。

+0

對於啓動它必須是BordersBorders Radu

沙发
0
0

你需要CSS的一點點這種解決方案。我會從那開始。

如果您有目錄中的所有HTML文件,繼續前進,創建一個名爲index.css或任何你喜歡一個CSS文件,只要擴展名是CSS。裏面每個.html文件的<head></head>把這個鏈接(改變你的CSS文件的名稱,如果你沒有使用index.css):

<link rel="stylesheet" type="text/css" href="index.css"> 

關於你的HTML中,<ul></ul>元素真正的意思包含列表與每個項目被定義爲<li></li>項目,即使只有一個項目。知道了,它應該看起來更像這個有點:

<font face="verdana" size=「10」>Swedish Political Geography</font> 
<ul class="navigation"> 
    <li><font face="verdana" size=「10」>Borders</font></li> 
    <li><font face="verdana" size=「10」>Government</font></li> 
</ul> 

<ul><li>元素是塊級元素,這意味着它們會佔用的可用寬度的100%。我們希望將這些元素更改爲inline-block元素,這些元素將它們與文本內聯對齊,但仍然使您能夠將它們視爲塊級元素。

對於這一點,這個下降到你的CSS文件:

ul { 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
} 

...併爲<li>

li { 
    display: inline-block; 
} 

應該很接近了,但你會發現從子彈名單仍然懸而未決。讓我們去掉那些:

ul { 
    display: inline-block; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 

添加list-style-type: none;告訴<li>不顯示任何一種裝飾功能。

你現在應該有一個連續的文本行!

實施例:

<font face="verdana" size=「10」>Swedish Political Geography</font> 
 
<ul class="navigation"> 
 
    <li><font face="verdana" size=「10」>Borders</font></li> 
 
    <li><font face="verdana" size=「10」>Government</font></li> 
 
</ul>

板凳
0
1

UL - 是一個元件,就需要把它轉化爲直列元件

顯示:內聯;

在樣式就像這樣(或者你的CSS文件中):

<!DOCTYPE html> 
    <html> 
     <head> 
      <title>Swedish Political Geography</title> 
      <style> 
       ul.navigation { 
       margin: 0; 
       padding: 4px; 
       } 
       ul.navigation li { 
       display: inline; 
       margin-right: 5px; 
       } 
      </style> 
     </head> 
     <body> 
     <font face="verdana" size=「10」>Swedish Political Geography</font> 
     <ul class="navigation"> 
      <li><font face="verdana" size=「10」>Borders</font></li> 
      <li><font face="verdana" size=「10」>Government</font></li> 
     </ul> 
    </body> 
</html> 
+0

想所有要在同一行 - 添加'顯示:內聯;''進ul.navigation block' – jlemon

0
votes
answers
36 views
+10

如何根據柔性佈局

1

獲得MD分壓器我知道MD-分頻器是MD-名單,但我想它在柔性佈局如何根據柔性佈局

例如:

<div layout="row" layout-wrap> 
    <div flex="100"></div> 
    <md-divider></md-divider> 
    <div flex="100"><div> 
</div> 

應該得到horizantal兩個div之間的另一種情況

<div layout="row" layout-wrap> 
    <div flex="50"></div> 
    <md-divider></md-divider> 
    <div flex="50"><div> 
</div> 

除法應該得到一個垂直分隔

我怎樣才能ACH即使這樣,任何幫助表示讚賞。謝謝。

沙发
0
0

你可以嘗試這樣的事情:

<md-divider class="vertical-divider"></md-divider> 

,並在CSS

.vertical-divider { 
    border-top: 0; 
    border-right: 1px solid grey; 
    height: 100%; 
} 
+0

它不會有任何的高度右所以需要指定唯一的自定義CSS的高度? –

+1

@AravindReddy編輯我的回答 – vitalym

+0

謝謝...... –

0
votes
answers
30 views
+10

card-img-top和卡體之間的邊界

0

我想在自舉卡中的圖像和卡體之間有邊框。我有一個CSS如下 -card-img-top和卡體之間的邊界

.card{ 
    border-width: 6px; 
    border-color: rgb(255, 255, 255); 
    border-radius: 0; 
    background-color: transparent; 
} 

.card-body{ 
    border-top-width: 5px; 
    border-top-color: rgb(255, 255, 255); 
    border-radius: 0; 
    color: rgb(255, 255, 255); 
    text-align: center; 
} 

HTML的

<div class="col-md-4"> 
    <div class="card"> 
    <img class="card-img-top" alt="Depression" src="images/depression.jpg"> 
    <div class="card-body"> 
     <h3 class="card-title">DEPRESSION</h3> 
     <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> 
    </div> 
    </div> 
</div> 

我want-

Card design I want

什麼我Getting-

Card design I'm Getting

所有幫助表示讚賞,謝謝。

+0

和HTML標記是什麼? – panther

沙发
0
1

爲了使用邊框,邊框樣式是強制性的。正如你可以閱讀here

注:參見下文 有除非的邊框樣式屬性設置任何影響其他CSS邊框屬性的無!

,所以你可以試試這個代碼:

.card-body{ 
    border-top-width: 5px; 
    border-top-color: rgb(255, 255, 255); 
    border-top-style:solid; 
    border-radius: 0; 
    color: rgb(255, 255, 255); 
    text-align: center; 
} 

或者乾脆做到這一點:

.card-body{ 
    border-top: 5px solid rgb(255, 255, 255); 
    border-radius: 0; 
    color: rgb(255, 255, 255); 
    text-align: center; 
} 
+0

工作!謝謝!但我想知道爲什麼它在沒有邊框風格的'卡'類上工作... – GradDev

+1

@GradDev:較短版本的代碼可能是https://jsfiddle.net/jyfcrmty/ – panther

+1

@GradDev如果您檢查Bootstrap CSS,您將看到它已經定義;) –

0
votes
answers
46 views
+10

受半透明疊加

-1

CSS邊界不透明度我有這樣的項目:受半透明疊加

https://jsfiddle.net/3xw9aqew/ 

當用戶將鼠標懸停在灰色框,紅色覆蓋帶有綠色邊框/輪廓。但是,此邊框將應用於在懸停時應用不透明度值的疊加層。

.image-container:hover .overlay { 
      opacity: 0.3; 
     } 

我想覆蓋到是半透明的,允許下面的圖片可以看到,但我想解決這個邊界是固體所以其標準的「綠」色。這是覆蓋的CSS:

.overlay { 
      position: absolute; 
      top: 0; 
      bottom: 0; 
      left: 0; 
      right: 0; 
      height: 100%; 
      width: 100%; 
      opacity: 0; 
      transition: .5s ease; 
      background-color: red; 
      border:10px solid green; 
      box-sizing:border-box; 
     } 

我該如何做到這一點?

沙发
0
0

對於預期的行爲,將所需透明度直接應用於background-color屬性值,而不是整個包含元素。這可以通過調整rgba的值來完成,如下面的嵌入代碼片段所示。

opacity應用於元素作爲一個整體,包括它的內容,即使該值不是由子元素繼承 。因此, 元素及其子元素相對於 元素的背景都具有相同的不透明度,即使它們相對於彼此具有不同的不透明度相對 也是如此。

opacity - CSS | MDN

.overlay { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: 100%; 
    width: 100%; 
    opacity: 1; 
    transition: .5s ease; 
    background-color: transparent; 
    border: 10px solid transparent; 
    box-sizing: border-box; 
} 

.image-container:hover .overlay { 
    background-color: rgba(255, 0, 0, 0.3); 
    border: 10px solid green; 
} 

Updated JSFiddle

代碼片段演示:

var imgContainer = document.getElementById("imgContainer"); 
 
var lorem = document.querySelector(".hdr-left"); 
 
var ipsum = document.querySelector(".hdr-right"); 
 

 
//When clicking on imgContainer toggle between class to change colour and position 
 
imgContainer.addEventListener('click', function() { 
 
    lorem.classList.toggle("hdr-color-white"); 
 
    ipsum.classList.toggle("hdr-color-white"); 
 
    lorem.classList.toggle('hdr-left-middle'); 
 
    ipsum.classList.toggle('hdr-right-middle'); 
 
});
body { 
 
    max-width: 100%; 
 
    overflow-x: hidden; 
 
    background: yellow; 
 
    font-family: sans-serif; 
 
} 
 

 
.container { 
 
    width: 85%; 
 
    max-width: 700px; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
img { 
 
    width: 100%; 
 
    max-width: 920px; 
 
} 
 

 
p { 
 
    font-size: 18px; 
 
    color: blue; 
 
    font-weight: bold 
 
} 
 

 
p.left { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0px; 
 
    right: -32%; 
 
    transform: rotate(-90deg); 
 
} 
 

 
p.right { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: -32%; 
 
    transform: rotate(90deg); 
 
} 
 

 
h2 { 
 
    font-size: 5em; 
 
    position: absolute; 
 
    text-transform: uppercase; 
 
    letter-spacing: 2px; 
 
    font-weight: bold; 
 
    margin: 0; 
 
    z-index: 5; 
 
    color: blue; 
 
    transition: all 0.5s ease-in-out; 
 
} 
 

 
.hdr-color-white { 
 
    color: white; 
 
} 
 

 
.hdr-left { 
 
    left: -12%; 
 
    top: -35%; 
 
} 
 

 
.hdr-left-middle { 
 
    left: 7%; 
 
    top: 40%; 
 
} 
 

 
.hdr-right { 
 
    right: -10%; 
 
    top: 110%; 
 
} 
 

 
.hdr-right-middle { 
 
    right: 7%; 
 
    top: 40%; 
 
} 
 

 

 
/*Hovers*/ 
 

 
.container:hover { 
 
    cursor: pointer 
 
} 
 

 
.container:hover>p { 
 
    color: red; 
 
} 
 

 
.container .image-container:hover {} 
 

 

 
/*Hovers Ends*/ 
 

 

 
/*Overlay*/ 
 

 
.image-container { 
 
    position: relative; 
 
    width: 100%; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
} 
 

 
.image { 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
    outline: 5px solid blue; 
 
} 
 

 
.container .image-container:hover>.image { 
 
    outline: none; 
 
} 
 

 
.overlay { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    opacity: 1; 
 
    transition: .5s ease; 
 
    background-color: transparent; 
 
    border: 10px solid transparent; 
 
    box-sizing: border-box; 
 
} 
 

 
.image-container:hover .overlay { 
 
    background-color: rgba(255, 0, 0, 0.3); 
 
    border: 10px solid green; 
 
} 
 

 

 
/*Overlay Ends*/
<div class="container"> 
 

 
    <!--Rotated Text--> 
 
    <p class="right">Harolds</p> 
 
    <p class="left">Harolds</p> 
 
    <!--//Rotated Text--> 
 

 
    <h2 class="hdr-left hdr-color" id="lorem">Lorem</h2> 
 

 
    <div class="image-container" id="imgContainer"> 
 
    <img src="http://via.placeholder.com/980x550" alt="gucci" class="image"> 
 
    <!--colour overlay--> 
 
    <div class="overlay"></div> 
 
    <!--//colour overlay--> 
 
    </div> 
 

 
    <h2 class="hdr-right hdr-color" id="ipsum">Ipsum</h2> 
 

 
</div>

0
votes
answers
7 views
+10

當我的菜單打開時,爲什麼圖像會像這樣移動?

0

如果您在我的網站http://imronan.co注意到,每當我按菜單按鈕顯示下拉菜單時,它似乎將圖像轉移到下方。我很困惑爲什麼會這樣。當我按下菜單按鈕來顯示菜單項時,我只希望它向下移動。當我的菜單打開時,爲什麼圖像會像這樣移動?

我有關CSS:

body { 
position: absolute; 
top: 50%; 
left: 50%; 
/* bring your own prefixes */ 
transform: translate(-50%, -50%); 
} 

a { 
color: aliceblue; 
font-family: 'Montserrat', sans-serif; 
text-decoration: none; 
/* no underline */ 
} 

.album { 
-webkit-box-reflect: below -10px -webkit-gradient(linear, left top,left bottom, from(transparent), to(rgba(250, 250, 250, 0.1))); 
} 


.album img { 
height: 350px; 
width: 350px; 
} 

... 

/*MENU*/ 
.burgermenu { 
z-index: 100000000; 
position: static; 
margin: 0px 0px; 
overflow: hidden; 
} 

.burgermenu ul { 
list-style-type: none; 
list-style-image: none; 
} 

.burgermenu li { 
padding: 0.5em 0.5em; 
float: left;  
} 

.burgermenu a { 
font-weight: 400; 
color: burlywood; 
text-shadow: 1px 1px 0px #000; 
} 

.burgermenu a:hover { 
text-decoration: underline; 
color: aliceblue; 
} 

而且,任何人知道如何解決的反射,從而不會干擾,當我將鼠標懸停在菜單按鈕?

+0

問題尋求幫助調試必須包括必要的重現它最短的代碼**在問題本身**。 [mcve]鏈接到你的網站是不夠的,因爲當它被修復或死亡時,會使你的問題和答案變得毫無意義。 – Rob

沙发
0
0

添加margin: auto;width: 350px;<div class="container">

+0

很高興我可以幫助:) – Srax

+0

哇!謝謝!任何關於反射的想法? –

+0

如果您更新您的網站,使圖像不適合整個屏幕我可以看看它:) – Srax

板凳
0
0

如果您進入開發人員模式並單擊圖像或菜單欄,它將顯示CSS更改位置或更改內容。我相信菜單隻會覆蓋一些CSS更改。 F12在鉻和你可以混亂的CSS

+0

P.S只有當它的全屏不在半屏或更小時纔會發生。 – newCoder

+0

我一直在檢查它幾個小時。我不確定它有什麼問題:/ –

地板
0
0

只看了一下CSS和HTML。這是關於div標籤專輯。它的尺寸改變使它向左移動一點。你將不得不只是浪費時間與div標籤或CSS

+0

好的,謝謝!要繼續尋找 –

+0

它的defo做到這一點,因爲圖像大小不會改變,但所有的divs改變,當你點擊漢堡按鈕 – newCoder

0
votes
answers
44 views
+10

html bootstrap無法對齊到中心

1

嘿傢伙我是新來的Stackoverflow,我一直在HTML編碼超過5個月了。我目前正在與Boostrap合作。我目前正在嘗試修改this網站,我喜歡它。但我似乎無法正確對齊,如this image所示。正如你所看到的,左側有更多的空間,右側有更少的空間。html bootstrap無法對齊到中心

我看過其他類似問題的Stackoverflow帖子,我查看了CSS文件,並試圖找到任何與保證金有關的內容並對其進行了修改,但我無法使其工作,因此我的部分正確居中。我正在使用row和span12。

基本上我試圖對準部分(<section id="projects">)頁面

我希望有人能幫助我的中心。 P.S這裏是一個下載鏈接的網站

http://www.alessioatzeni.com/blog/brushed-template/

太謝謝你了:)

更新1 這是我的工作股利。我沒有修改CSS

<!-- Our Work Section --> 
<div id="work" class="page"> 
    <div class="container"> 
     <div class="row"> 
      <div class="span12"> 
       <div class="title-page-less-margin"> 
        <h2 class="title">Our Work</h2> 
        <h3 class="title-description">Check Out Our Projects on <a href="#">Dribbble</a>.</h3> 

       </div> 
      </div> 
     </div> 
     <!-- Portfolio Projects --> 

     <div class="span12"> 
      <div class="row"> 

       <div class="title-page-less-margin"> 
        <nav id="options" class="work-nav"> 

         <ul id="filters" class="option-set" data-option-key="filter"> 
          <a href="#filter" data-option-value="*" class="selected">All Projects</a> 
          <a href="#filter" data-option-value=".design">Design</a> 
          <a href="#filter" data-option-value=".photography">Photography</a>< 
          <a href="#filter" data-option-value=".video">Video</a> 
         </ul> 

        </nav> 
       </div> 


       <section id="projects"> 
        <ul id="thumbs"> 

         <!-- Item Project and Filter Name --> 
         <li class="item-thumbs span3 design"> 
          <!-- Fancybox - Gallery Enabled - Title - Full Image --> 
          <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The City" href="_include/img/work/full/image-01-full.jpg"> 

           <span class="overlay-img"></span> 
           <span class="overlay-img-thumb font-icon-plus"></span> 
          </a> 

          <!-- Thumb Image and Description --> 
          <img src="_include/img/work/thumbs/image-01.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis. hihihi"> 
         </li> 
         <!-- End Item Project --> 

         <!-- Item Project and Filter Name --> 
         <li class="item-thumbs span3 design"> 
          <!-- Fancybox - Gallery Enabled - Title - Full Image --> 
          <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The Office" href="_include/img/work/full/image-02-full.jpg"></a> 
          <!-- Thumb Image and Description --> 
          <img src="_include/img/work/thumbs/image-02.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis."> 
         </li> 
         <!-- End Item Project --> 

         <!-- Item Project and Filter Name --> 
         <li class="item-thumbs span3 photography"> 
          <!-- Fancybox - Gallery Enabled - Title - Full Image --> 
          <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The Mountains" href="_include/img/work/full/image-03-full.jpg"></a> 
          <!-- Thumb Image and Description --> 
          <img src="_include/img/work/thumbs/image-03.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis."> 
         </li> 
         <!-- End Item Project --> 

         <!-- Item Project and Filter Name --> 
         <li class="item-thumbs span3 video"> 
          <!-- Fancybox Media - Gallery Enabled - Title - Link to Video --> 
          <a class="hover-wrap fancybox-media" data-fancybox-group="video" title="Video Content From Vimeo" href="http://vimeo.com/51460511"></a> 
          <!-- Thumb Image and Description --> 
          <img src="_include/img/work/thumbs/image-08.jpg" alt="Video"> 
         </li> 
         <!-- End Item Project --> 

         <!-- Item Project and Filter Name --> 
         <li class="item-thumbs span3 photography"> 
          <!-- Fancybox - Gallery Enabled - Title - Full Image --> 
          <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The Sea" href="_include/img/work/full/image-04-full.jpg"></a> 
          <!-- Thumb Image and Description --> 
          <img src="_include/img/work/thumbs/image-04.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis."> 
         </li> 
         <!-- End Item Project --> 

         <!-- Item Project and Filter Name --> 
         <li class="item-thumbs span3 photography"> 
          <!-- Fancybox - Gallery Enabled - Title - Full Image --> 
          <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="Clouds" href="_include/img/work/full/image-05-full.jpg"></a> 
          <!-- Thumb Image and Description --> 
          <img src="_include/img/work/thumbs/image-05.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis."> 
         </li> 
         <!-- End Item Project --> 

         <!-- Item Project and Filter Name --> 
         <li class="item-thumbs span3 video"> 
          <!-- Fancybox Media - Gallery Enabled - Title - Link to Video --> 
          <a class="hover-wrap fancybox-media" data-fancybox-group="video" title="Video Content From Vimeo" href="http://vimeo.com/50834315"></a> 
          <!-- Thumb Image and Description --> 
          <img src="_include/img/work/thumbs/image-09.jpg" alt="Video"> 
         </li> 
         <!-- End Item Project --> 

         <!-- Item Project and Filter Name --> 
         <li class="item-thumbs span3 design"> 
          <!-- Fancybox - Gallery Enabled - Title - Full Image --> 
          <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The Dark" href="_include/img/work/full/image-06-full.jpg"></a> 
          <!-- Thumb Image and Description --> 
          <img src="_include/img/work/thumbs/image-06.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis."> 
         </li> 
         <!-- End Item Project --> 

         <!-- Item Project and Filter Name --> 
         <li class="item-thumbs span3 design"> 
          <!-- Fancybox - Gallery Enabled - Title - Full Image --> 
          <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The Beach" href="_include/img/work/full/image-07-full.jpg"></a> 
          <!-- Thumb Image and Description --> 
          <img src="_include/img/work/thumbs/image-07.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis."> 
         </li> 
         <!-- End Item Project --> 
        </ul> 
       </section> 
      </div> 
     </div> 

     <!-- End Portfolio Projects --> 


     <!-- End Title Page --> 
    </div> 
</div> 
+0

什麼是你想準確對齊? – Srax

+0

@Srax對不起,我應該提到這一點。我正在嘗試對齊圖像,使得'section'帶有id'projects' – noobthatsnew

+0

您能否提供HTML和CSS,會讓它更容易幫助您。 – Srax

沙发
0
0

更換整個<div class="container">與下面的代碼:
PS:我知道你不應該寫在HTML CSS,但是這是他們的方式我固定它,而不必在CSS我pc,你可以稍後將它移動到樣式表中。

<div class="container"> 
    <!-- Title Page --> 
    <div class="row" style=" 
     text-align: center; 
     padding-bottom: 30px; 
     "> 
     <h2 class="title">Our Work</h2> 
     <h3 class="title-description">Check Out Our Projects on <a href="#">Dribbble</a>.</h3> 
     <div class="title-page-less-margin"> 
      <nav id="options" class="work-nav"> 

       <ul id="filters" class="option-set" data-option-key="filter"> 
        <a href="#filter" data-option-value="*" class="selected">All Projects</a> 
        <a href="#filter" data-option-value=".design">Design</a> 
        <a href="#filter" data-option-value=".photography">Photography</a>&lt; 
        <a href="#filter" data-option-value=".video">Video</a> 
       </ul> 

      </nav> 
     </div> 
    </div> 

    <div class="row"> 

     <section id="projects"> 
      <ul id="thumbs"> 

       <!-- Item Project and Filter Name --> 
       <li class="item-thumbs span3 design"> 
        <!-- Fancybox - Gallery Enabled - Title - Full Image --> 
        <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The City" href="_include/img/work/full/image-01-full.jpg"> 

           <span class="overlay-img"></span> 
           <span class="overlay-img-thumb font-icon-plus"></span> 
          </a> 

        <!-- Thumb Image and Description --> 
        <img src="_include/img/work/thumbs/image-01.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis. hihihi"> 
       </li> 
       <!-- End Item Project --> 

       <!-- Item Project and Filter Name --> 
       <li class="item-thumbs span3 design"> 
        <!-- Fancybox - Gallery Enabled - Title - Full Image --> 
        <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The Office" href="_include/img/work/full/image-02-full.jpg"></a> 
        <!-- Thumb Image and Description --> 
        <img src="_include/img/work/thumbs/image-02.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis."> 
       </li> 
       <!-- End Item Project --> 

       <!-- Item Project and Filter Name --> 
       <li class="item-thumbs span3 photography"> 
        <!-- Fancybox - Gallery Enabled - Title - Full Image --> 
        <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The Mountains" href="_include/img/work/full/image-03-full.jpg"></a> 
        <!-- Thumb Image and Description --> 
        <img src="_include/img/work/thumbs/image-03.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis."> 
       </li> 
       <!-- End Item Project --> 

       <!-- Item Project and Filter Name --> 
       <li class="item-thumbs span3 video"> 
        <!-- Fancybox Media - Gallery Enabled - Title - Link to Video --> 
        <a class="hover-wrap fancybox-media" data-fancybox-group="video" title="Video Content From Vimeo" href="http://vimeo.com/51460511"></a> 
        <!-- Thumb Image and Description --> 
        <img src="_include/img/work/thumbs/image-08.jpg" alt="Video"> 
       </li> 
       <!-- End Item Project --> 

       <!-- Item Project and Filter Name --> 
       <li class="item-thumbs span3 photography"> 
        <!-- Fancybox - Gallery Enabled - Title - Full Image --> 
        <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The Sea" href="_include/img/work/full/image-04-full.jpg"></a> 
        <!-- Thumb Image and Description --> 
        <img src="_include/img/work/thumbs/image-04.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis."> 
       </li> 
       <!-- End Item Project --> 

       <!-- Item Project and Filter Name --> 
       <li class="item-thumbs span3 photography"> 
        <!-- Fancybox - Gallery Enabled - Title - Full Image --> 
        <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="Clouds" href="_include/img/work/full/image-05-full.jpg"></a> 
        <!-- Thumb Image and Description --> 
        <img src="_include/img/work/thumbs/image-05.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis."> 
       </li> 
       <!-- End Item Project --> 

       <!-- Item Project and Filter Name --> 
       <li class="item-thumbs span3 video"> 
        <!-- Fancybox Media - Gallery Enabled - Title - Link to Video --> 
        <a class="hover-wrap fancybox-media" data-fancybox-group="video" title="Video Content From Vimeo" href="http://vimeo.com/50834315"></a> 
        <!-- Thumb Image and Description --> 
        <img src="_include/img/work/thumbs/image-09.jpg" alt="Video"> 
       </li> 
       <!-- End Item Project --> 

       <!-- Item Project and Filter Name --> 
       <li class="item-thumbs span3 design"> 
        <!-- Fancybox - Gallery Enabled - Title - Full Image --> 
        <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The Dark" href="_include/img/work/full/image-06-full.jpg"></a> 
        <!-- Thumb Image and Description --> 
        <img src="_include/img/work/thumbs/image-06.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis."> 
       </li> 
       <!-- End Item Project --> 

       <!-- Item Project and Filter Name --> 
       <li class="item-thumbs span3 design"> 
        <!-- Fancybox - Gallery Enabled - Title - Full Image --> 
        <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The Beach" href="_include/img/work/full/image-07-full.jpg"></a> 
        <!-- Thumb Image and Description --> 
        <img src="_include/img/work/thumbs/image-07.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis."> 
       </li> 
       <!-- End Item Project --> 
      </ul> 
     </section> 

    </div> 
</div> 

應該是這樣的: enter image description here

+0

哇,它沒有辦法工作!非常感謝。因此,對於使用行或跨度的所有內容,我將如何修復它?因爲除了項目之外沒有任何東西可以對齊 – noobthatsnew

+0

沒問題,很高興我能提供幫助。 不幸的是編輯一個模板可能是一個真正的痛苦。 你可以嘗試給我你整個項目。你可以上傳到某個地方的zip文件,併發送給我一個下載鏈接:) – Srax

+0

在這裏你去https://drive.google.com/open?id=1aGTPj3ojSZeJNFkwHCx_K-_9Avf3rxAj認真老兄我很高興你可以幫助你不知道多久我試圖修復它之前,我發佈的問題 – noobthatsnew

0
votes
answers
37 views
+10

Bootstrap 4傳送帶空間到右邊

1

我有一個Bootstrap 4傳送帶空間到右邊的問題,它與頁面沒有很好的對齊。示例在這裏:http://jsbin.com/wakuyiqebu它在移動設備上更加引人注目。Bootstrap 4傳送帶空間到右邊

<div class="col-12 col-sm-12 col-md-12 col-lg-5 bg-dark"> 
</div> 
<div class="col-12 col-sm-12 col-md-12 col-lg-7 padding-off">  
    <div id="carouselExampleIndicators" class="carousel slide" data- 
     ... 
    </div> 
</div> 
沙发
0
1

看起來像這個問題消失,至少在我的瀏覽器中,當我從你的部分標記刪除「填充」。

+0

這沒有奏效。主容器右側仍有空間。 – clementeghuerta

0
votes
answers
31 views
+10

是否有可能使用固定小孩的父容器溢出?

2

我有一個父母與自動身高(例如我添加高度300px測試pupose)和子元素的位置:固定。即使孩子有固定位置,只要孩子可以伸展父母元素嗎?是否有可能使用固定小孩的父容器溢出?

<div class="parent"> 
    <div class="fixed"></div> 
</div> 

.fixed { 
    position: fixed; 
    height: 750px; 
    width: 100%; 
    background: red; 
    opacity: 0.5; 
    margin: auto; 
} 

.parent { 
    height: 300px; 
    background: yellow; 
} 

例這裏 https://jsfiddle.net/hz0wgx1w/

+0

拉伸取決於孩子的內容? –

+1

當你使用position:fixed時,你從html流中獲取元素。這意味着它不管是孩子,兄弟姐妹還是父母都無關緊要。所以,總之,不,這是不可能的。 –

+0

你可以使用jQuery,這是可能的。 – Sonia

沙发
0
0

我不能想辦法單獨用CSS來做到這一點,但這裏使用jQuery來更新CSS實例以便父母的高度和寬度匹配孩子的:

https://jsfiddle.net/hz0wgx1w/13/

請記住,與孩子固定的,它不會與母公司同步滾動,所以這隻能設置其初始大小相匹配。它不能確保他們的位置在滾動時會繼續匹配。

這也沒有考慮到響應性,所以在頁面加載後對子頁面寬度的任何更改都不會導致父頁面更新,但根據您的目標,也可以使用jQuery輕鬆完成。

我保存了您的HTML,但如果您打算在其他元素上重用這些類,則使用不同的ID而不是類會更安全。

$(".parent").css("height", $(".fixed").css("height")); 
 
$(".parent").css("width", $(".fixed").css("width"));
.fixed { 
 
    position: fixed; 
 
    height: 750px; 
 
    width: 100%; 
 
    background: red; 
 
    opacity: 0.5; 
 
    margin: auto; 
 
} 
 

 
.parent { 
 
    height: 300px; 
 
    background: yellow; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parent"> 
 
    <div class="fixed"></div> 
 
</div>

0
votes
answers
8 views
+10

在內部元素和外部元素之間創建空間

0

我是一名HTML初學者,我知道填充是內容和邊框之間的空間,而邊距是邊框之外的空間。在內部元素和外部元素之間創建空間

所以,如果我想創建內部元件與外界之間存在某種空間 - 就像我從 pic1 - original status pic2 - excepted result的效果,它應該把padding-top: 100px;外部元件上,而不是把margin-top: 100px;內部元素。

所以,我的問題是,當我把margin-top: 100px;內部元件上不能創造空間( pic3 - no effect css setting),但爲什麼當我把margin-top: 300px;外部元件身體和外部元件之間創造空間嗎?

,然後我試圖把內部元件上的外界因素上都padding-top: 100px;margin-top: 100px;,和我有一個奇怪的結果( pic4 - surprised result),即margin-top: 100px;內部元件的工作了!那麼,我還不明白什麼概念或細節,誰能告訴我?順便說一下,這是我第一次問問題的計算器:)

pic1 - original status

pic2 - excepted resultpadding-top: 100px;外部元件

pic3 - no effect css settingmargin-top: 100px;內部元件

pic4 - surprised resultpadding-top: 100px;放在外部元素 和margin-top: 100px;內部元件

HTML

<body> 
    <div class="center outside"> 
     <div class="center inside">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur modi repellendus, aliquam impedit! Harum autem repellat voluptate sint assumenda nam illo! Voluptatibus amet, porro dolor. Nostrum, eaque, ad. Iste nesciunt reprehenderit quaerat officia facilis a libero fugit minus modi quia. Voluptatum similique sapiente voluptatem iure amet ea perspiciatis est. Tempora.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur modi repellendus, aliquam impedit! Harum autem repellat voluptate sint assumenda nam illo! Voluptatibus amet, porro dolor. Nostrum, eaque, ad. Iste nesciunt reprehenderit quaerat officia facilis a libero fugit minus modi quia. Voluptatum similique sapiente voluptatem iure amet ea perspiciatis est. Tempora.</div> 
    </div> 
</body> 

PIC的CSS 1

.center { 
    margin: 0 auto; 
} 

.outside { 
    margin-top: 300px; 
    width: 30%; 
    background-color: coral; 
} 

.inside { 
    padding: 20px; 
    width: 80%; 
    background-color: aquamarine; 
} 

PIC的CSS 2

.center { 
    margin: 0 auto; 
} 

.outside { 
    margin-top: 300px; 
    padding-top: 100px; 
    width: 30%; 
    background-color: coral; 
} 

.inside { 
    padding: 20px; 
    width: 80%; 
    background-color: aquamarine; 
} 

PIC的CSS 3

.center { 
    margin: 0 auto; 
} 

.outside { 
    margin-top: 300px; 
    width: 30%; 
    background-color: coral; 
} 

.inside { 
    margin-top: 100px; 
    padding: 20px; 
    width: 80%; 
    background-color: aquamarine; 
} 

CSS元素崩潰的PIC 4

.center { 
    margin: 0 auto; 
} 

.outside { 
    margin-top: 300px; 
    padding-top: 100px; 
    width: 30%; 
    background-color: coral; 
} 

.inside { 
    margin-top: 100px; 
    padding: 20px; 
    width: 80%; 
    background-color: aquamarine; 
} 
+0

您需要出示** **完整的標記,顯示的問題。您尚未提供任何HTML。 [mcve]您需要搜索「摺疊邊距」。 – Rob

+0

謝謝@Rob!我將檢查有用的文章,以及「SO」的含義是什麼? – Srichsun

+0

我以爲我提供了HTML代碼的基本部分? – Srichsun

沙发
0
0

邊距(特別是在頂部和底部)的,當他們觸摸一起或蓋父/子元素的利潤率。因爲這些規則可能會變得有點複雜,所以不是那麼高級的css用戶應該儘可能地避免使用邊距,而是使用填充。

就你的情況而言,由於父元素沒有邊框或填充,因此瀏覽器使用父和子的最大邊距,並將其放在父元素的周圍。

點擊此處瞭解詳情: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

+0

非常感謝!我知道邊緣塌陷發生在相鄰的兄弟姐妹身上,但不知道它也發生在父母和子女之間。我現在很清楚:) – Srichsun