Question

我正在尝试使用html和css开发一个小型网站。我对css很陌生，所以尽管现在已经有很长一段时间了，但我还是不知道如何继续进行。

我想做什么：我有两个youtube视频要集成到我的网页中。我想将我的网页划分为两列（将来可能更多），并将第一个视频放在左列的中间，第二个视频放在第二列的中间。

我已经尝试过使用 float：left; 以及引导程序，但它并没有按我想要的方式居中（或者我可能还没找到方式）。我也尝试了html无序列表格式，但它也没有按预期工作。

我不想滚动到每一栏，我只想要某种位置，即使我们放大/缩小网页，也可以将视频放在中心。

这是我在这里的第一个问题，请随时告诉我，如果我做错了什么：）

Answer 1

如果您希望将页面划分为列，则可能需要查看引导程序。它将来更容易更改列数。

回到主要问题，为了将视频集中在每一栏中，只需应用＆＃39; margin：auto＆＃39;在列上。这是一个有效的例子：http://codepen.io/xvariant/pen/bEKYEM

＆＃13;

<select id="country" name="country">
    <option value="at">Austria</option>
    <option value="cy">Cyprus</option>
    <option value="de">Germany</option>
    <option value="pt">Portugal</option>
    <option value="es">Spain</option>
</select>

<div class="map" id="map"></div>

<script>

mapboxgl.accessToken = 'the_access_token';
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/streets-v8', //stylesheet location
    center: [-74.50, 40], // random starting position
    zoom: 9 // starting zoom level
});

// Find country
$('#country').on('change', function (e) {
    countrycode = $(this).val();
    country = $(this).find('option:selected').text();
    console.log(countrycode, country);
    $.ajax({
        url: "https://api.mapbox.com/geocoding/v5/mapbox.places/"+country+".json?country="+countrycode+"&access_token="+mapboxgl.accessToken,
        success: function(res) {
            console.log(res);
            map.easeTo({
                center: res.features[0].center,
                // zoom:
            });
        }
    });
});

</script>

＆＃13;

.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%;
}

＆＃13;

Answer 2

我希望我理解你要做的事情。如果是这样，这里是bootstrap示例：

CSS样式：

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

HTML code：

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

Answer 3

我希望我理解你的问题。如果是这样，我认为这将解决您的问题。

我认为您应该在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;
}

Answer 4

这是将两个div连成一行并将第二个div对齐到中心的简单css。

＆＃13;

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

＆＃13;

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

＆＃13;

由于你是css的新手，我建议使用bootstrap而不是尝试使用你自己的css。

如何制作两个独立的独立列（使用html和css）

4 个答案: