Question

我写了一些简单的HTML和CSS。我想在图像的右侧获得一个按钮列表。

我尝试使用float和display: inline

<html>
<head>
    <title>title</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <section class="main">
        <div class="container">
            <div id="image">
                <img src="img/placeholder.png" />
             </div>
            <div id="controls-container">
                <div class="controls">Start</div>
                <div class="controls">Right</div>
                <div class="controls">Back</div>
                <div class="controls">Down</div>
             </div>
        </div>
    </section>
    <div class="footer-container">
        <footer>
            <h5>footer</h5>
        </footer>
    </div>
</body>
</html>




.main{
    background: yellow;
}

#image img {
    width: 1000px;
    height: 600px;
}

#controls-container{
    background: pink;
}

.footer-container {
    clear: both;
    text-align: center;
    margin-top: 5em;
    margin-bottom: 2em;
}

我将除页脚以外的所有内容的容器突出显示为黄色。装有按钮的容器是粉红色的。我这样做是为了帮助我在测试时了解容器的状况。

对于浮动，我尝试将按钮容器浮动到右侧。这导致按钮转到页面右侧，并且似乎以某种方式使自己与主容器脱离关联，因为它不再以黄色突出显示。

我也尝试过将img浮动到左侧。到目前为止，这似乎是最好的帮助，除了黄色背景消失了。我其余的容器怎么了？我已经尝试过使用margin-top将按钮向下移到图像的中间，但是图像和按钮的页边距似乎都已改变。

有更好的方法吗？谢谢。

Answer 1

我建议您使用display: flex;来执行此操作。使用flex完成对齐要容易得多。这是示例代码。

我已将align-items: flex-start添加到您的controls-container中，以便仅从顶部占用空间。如果您希望容器连同image-container一起占据整个高度，请随时删除该代码。我也删除了您的ID，并使用类来引用样式，我建议您也这样做。希望对您有帮助。

HTML

<div class="d-flex flex-column">

  <div class="container main">

    <div class="image-container">
      <img src="img/placeholder.png" />
    </div>

    <div class="controls-container">
      <div class="controls">Start</div>
      <div class="controls">Right</div>
      <div class="controls">Back</div>
      <div class="controls">Down</div>
    </div>

  </div>

  <div class="footer">
    <h5>
      Footer
    </h5>
  </div>

</div>

CSS

.d-flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.main {
  background: yellow;
}

.image-container {
  width: 1000px;
  height: 600px;
}

.controls-container {
  display: flex;
  flex-direction: row;
  background: pink;
}

.footer {
  clear: both;
  text-align: center;
  margin-top: 5em;
  margin-bottom: 2em;
}

JS小提琴链接：https://jsfiddle.net/SJ_KIllshot/fq8t3ndw/

Answer 2

另一种方法是使用position。我刚刚调整了您的代码，下面是代码段，请查看它。

.main {
  background: yellow;
  position: relative
}

#image img {
  width: 1000px;
  height: 600px;
}

#controls-container {
  background: pink;
  position: absolute;
  right: 0px;
  top: 0px;
}

.controls {
  display: inline;
}

.footer-container {
  clear: both;
  text-align: center;
  margin-top: 5em;
  margin-bottom: 2em;
}

<html>

<head>
  <title>title</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <section class="main">
    <div class="container">
      <div id="image">
        <img src="img/placeholder.png" />
      </div>
      <div id="controls-container">
        <div class="controls">Start</div>
        <div class="controls">Right</div>
        <div class="controls">Back</div>
        <div class="controls">Down</div>
      </div>
    </div>
  </section>
  <div class="footer-container">
    <footer>
      <h5>footer</h5>
    </footer>
  </div>
</body>

</html>

需要按钮列表浮在图像的右侧

2 个答案: