Question

我是html和css的新手。我的问题是如何放置图像和两个按钮以确保它们将一起显示？看图像，了解我的意思。感谢!!!!

Answer 1

对于图像居中，您可以使用：

<div id="wrapper">
    <button id="button1">button left</button>
    <button id="button2">button right</button>
</div>

然后，您可以使用按钮：

#button1 {
    display: inline-block;
    width:120px;
    height:120px;
}
#button2 {
    display: inline-block;
    width:160px;
    height:160px;
}

然后这个css：

    #button1 {
    display: inline-block;
    width:120px;
    height:120px;
}
#button2 {
    display: inline-block;
    width:160px;
    height:160px;
}

然后将其合并到此：

＆＃13;

    <div id="container">
      <img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fthumb%2F8%2F8f%2FExample_image.svg%2F1024px-Example_image.svg.png&f=1" style="margin-left:auto;margin-right:auto;"></img>
      <br>
      <button id="button1">button left</button>
      <button id="button2">button right</button>
    </div>

＆＃13;

<br>

＆＃13;

如果您对get_template_directory_uri()标记的含义感到困惑，它只是一个换行符，以确保按钮不会放在图像旁边。

Answer 2

这是我的解决方案。尝试全屏打开代码段，然后调整浏览器的大小。

当屏幕宽度大于awk -v s='text' 'BEGIN { print(s) }' text awk -v s=$'\n''text' 'BEGIN { print(s) }' awk: newline in string text... at source line 1时（你可以更改此值），768px的宽度为container。

当宽度较小时，容器占据屏幕的整个宽度。

这由

处理

500px

对于按钮，它们的组合宽度将始终等于图像的宽度。

这由

处理

.container {
  width: 500px;
  margin: 0 auto;
}

@media(max-width:768px) { 
  .container {
    width: 100%;
  }
}

.btn-container {
  font-size: 0;/*used for removing whitespace from inline elements*/
}

.btn-container button {
  width: 50%;
  font-size: initial;
  padding: 15px;
}

* {
  box-sizing: border-box;
}

.container {
  width: 500px;
  margin: 0 auto;
}

@media(max-width:768px) { /* can be any number less than this depending on ur choice */
  .container {
    width: 100%;
  }
}

img {
  display: block;
  width: 100%;
  height: 200px;
}

.btn-container {
  font-size: 0;
}

.btn-container button {
  width: 50%;
  font-size: initial;
  padding: 15px;
}


/*Space between */

.btn-holder {
  width: 50%;
  display: inline-block;
}

.btn-holder button {
  width: 100%;
}

.b1 {
  padding-right: 5px;
}

.b2 {
  padding-left: 5px;
}

如何将图像放在容器中间，底部有两个按钮

2 个答案: