如何製作兩個單獨的獨立列（使用html和css）

我正在嘗試開發一個使用html和css的小型網站。我對CSS很新，所以儘管現在已經找了很長時間，但我還是不知道如何繼續。如何製作兩個單獨的獨立列（使用html和css）

我想要做的事情：我有兩個YouTube視頻可以整合到我的網頁中。我想將我的網頁分成兩列（將來可能會更多），並將第一個視頻放在左欄中央，第二個視頻放在第二欄中間。

我已經試過使用float：left;也bootstrap，但它不會以我想要的方式（或者我只是沒有找到方式）的視頻中心。我也嘗試過html無序列表格式，但它沒有像預期的那樣工作。

我不想滾動到每一列，我只是想要某種位置，即使我們放大/縮小網頁，也可以讓視頻在中心。

這是我的第一個問題在這裏可以隨意告訴我，如果我做錯事:)

2016-01-30 Yocto

能否請您至少提供你怎麼想的頁面看起來像一些樣機？ – alesc

下面是我想要的截圖：http://s27.postimg.org/ggkzpm4f7/screenshot。jpg 這是使用float：left，float：right和position：relative，這意味着放大完全破壞了這個宏偉壯觀的頁面。 – Yocto

如果您希望將列表分成若干列，那麼您可能需要查看引導程序。將來更改列數會更容易。

即將出現的主要問題是，爲了將視頻集中在每個列中，只需在列上應用「margin：auto」即可。這裏有一個工作示例：http://codepen.io/xvariant/pen/bEKYEM

.row > div:first-child { 
 
    background-color: #8E3E3E; 
 
} 
 
.row > div { 
 
    background-color: #3E8E3E; 
 
} 
 
.video-wrapper { 
 
    position: relative; 
 
    padding-bottom: 56.25%; 
 
    padding-top: 25px; 
 
    height: 0; 
 
    width: 75%; 
 
    margin: auto; 
 
} 
 
.video-wrapper iframe { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet" /> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-sm-6"> 
 
     <div class="video-wrapper"> 
 
     <iframe src="https://www.youtube.com/embed/uRT-DaL64Uo" frameborder="0" allowfullscreen></iframe> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-6 text-center"> 
 
     <div class="video-wrapper"> 
 
     <iframe src="https://www.youtube.com/embed/uRT-DaL64Uo" frameborder="0" allowfullscreen></iframe> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-01-30 17:55:41

工作正常，非常好。非常感謝！ – Yocto

我希望我明白你的問題。如果是這樣，我認爲這會解決你的問題。

我想你應該在HTML創建兩列是這樣的：

<div class="columns"> 
    <div class="column-left"> 
     Here you should embed your youtube video 
    </div> 
    <div class="column-right"> 
     Here you should embed your second youtube video 
    </div> 
</div>

然後，你需要創建一個這樣的CSS：

.columns { 
    max-width:100%; 
} 

.column-left { 
    max-width:50%; 
    margin: auto; 
} 

.column-right { 
    max-width:50%; 
    margin:auto; 
}

來源

2016-01-30 17:13:47

嘗試確切地告訴我，現在第二個視頻低於第一個視頻。我真的不明白。我甚至試圖改變每個最大寬度的值，但它似乎仍然不能很好地工作。 – Yocto

下面是簡單的CSS放兩個DIV中一排並將第二個div對齊中心。

.container { 
 
    width: 100%; 
 
    } 
 

 
.container div { 
 
    width: 300px; 
 
    height: 100%; 
 
    border: 1px solid red; 
 
    float: left; 
 
    margin:10px; 
 
    } 
 

 
.second { 
 
    text-align: center; 
 
}

<div class="container"> 
 
    <div class="first"> First Youtube video 
 
    </div> 
 
    <div class="second"> Second Youtube video 
 
    </div> 
 
    </div>

既然你是新來的CSS，我建議要引導，而不是使用與自己的CSS嘗試。

來源

2016-01-30 17:14:33 Siva

我希望我理解你正在嘗試做的情況。如果是這樣，這裏的引導例如：

CSS樣式：

.width-400 { 
    width: 400px; 
} 
.no-gutter > [class*='col-'] { 
    padding-right: 0; 
    padding-left: 0; 
}

HTML代碼：

<div class="row-fluid no-gutter"> 
    <div class="col-md-6"> 
     <div class="center-block width-400"> 
      <!-- 16:9 aspect ratio --> 
      <div class="embed-responsive embed-responsive-16by9"> 
       <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/F2iSzV50ACM" frameborder="0" allowfullscreen></iframe> 
      </div> 
     </div> 
    </div> 

    <div class="col-md-6"> 
     <div class="center-block width-400"> 
      <!-- 4:3 aspect ratio --> 
      <div class="embed-responsive embed-responsive-4by3"> 
       <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/F2iSzV50ACM" frameborder="0" allowfullscreen></iframe> 
      </div> 
     </div> 
    </div> 
</div>

來源

2016-01-30 19:42:26

如何製作兩個單獨的獨立列（使用html和css）

回答

相關問題