Question

我要创建包含以下内容的模板：

左侧：有图片
右侧：有4个按钮

我的例子：

如何使用HTMl和CSS创建该设计？谢谢。

Answer 1

	*{ margin: 0px; padding: 0px; box-sizing: border-box; }
		.img_box_btn {
		display: flex;
		flex-wrap: wrap;
		margin: 0 -15px;
		align-items: center;
		box-sizing: border-box;
		}
		.img_box_btn .left {
		-ms-flex: 0 0 40%;
		flex: 0 0 40%;
		max-width: 40%;
		padding: 0 15px;
		}
		.img_box_btn img {
		max-width: 100%;
		}
		.img_box_btn  .right {
		padding: 0 15px;
		-ms-flex: 0 0 60%;
		flex: 0 0 60%;
		max-width: 60%;
		}
		ul.list-btn-box {
		display: flex;
		flex-wrap: wrap;
		margin: 0 -15px;
		list-style: none;
		}
		ul.list-btn-box li {
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
		margin-bottom: 15px;
		padding: 0px 15px;
		}
		.img_box_btn * {
		box-sizing: border-box;
		}
		ul.list-btn-box li .btn-cus {
		padding: 12px 20px;
		display: block;
		background-color: #000;
		color: #ffff;
		border: 1px solid #000;
		font-size: 13px;
		text-transform: uppercase;
		}
		@media only screen and (max-width: 640px) {
		.img_box_btn .left,.img_box_btn .right {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
		padding: 15px 15px;
		}
		}

<!doctype html>
<html lang="en">
	<head>
		<!-- Required meta tags -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<title>responsive image and four buttons</title>
		
	</head>
	<body>
		<div style="max-width: 800px; margin: 15px auto; padding: 0  15px;">
			<div class="img_box_btn">
				<div class="left">
					<img src="https://via.placeholder.com/450">
				</div>
				<div class="right">
					<ul class="list-btn-box">
						<li><button class="btn-cus">button 01</button></li>
						<li><button class="btn-cus">button 02</button></li>
						<li><button class="btn-cus">button 03</button></li>
						<li><button class="btn-cus">button 04</button></li>
					</ul>
				</div>
			</div>
		</div>
	</body>
</html>

Answer 2

尝试使用display:flex;和display:grid;来执行此操作。这是示例代码。希望对您有帮助

.d-flex {
  display: flex;
}

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

.align-items-center {
  align-items: center;
}

.justify-content-center {
  justify-content: center;
}

.button-container {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
}

.button {
  border: 1px solid;
  border-radius: 4px;
  padding: 5px 5px;
  text-align: center;
}

.image {
  margin-right: 1rem;
}

<div class="d-flex flex-row align-items-center justify-content-center">
  <img class="image" src="https://via.placeholder.com/150">
  <div class="button-container">
    <div class="button">
      Button 1
    </div>
    <div class="button">
      Button 2
    </div>
    <div class="button">
      Button 3
    </div>
    <div class="button">
      Button 4
    </div>
  </div>
</div>

编辑：我添加了媒体查询，并缩短了此代码段中的CSS代码，以便该按钮将在较小的屏幕上显示在图像下方

.main-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.button-container {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
}

.button {
  border: 1px solid;
  border-radius: 4px;
  padding: 5px 5px;
  text-align: center;
}

.image {
  margin-right: 1rem;
}

@media (min-width: 320px) and (max-width: 480px) {
  .main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .image {
    margin-right: 0;
    margin-bottom: 1rem;
  }
}

<div class="main-container">
  <img class="image" src="https://via.placeholder.com/150">
  <div class="button-container">
    <div class="button">
      Button 1
    </div>
    <div class="button">
      Button 2
    </div>
    <div class="button">
      Button 3
    </div>
    <div class="button">
      Button 4
    </div>
  </div>
</div>

Answer 3

可以做很多事情。但是，我使用了引导程序使事情变得简单。请查看以下代码：

   <!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Sample Project</title>
</head>
<body>
    <div class="container">
      <div class="row">
            <div class="col-lg-4 col-sm-12 img-col">
                <img src="https://previews.123rf.com/images/iqoncept/iqoncept1406/iqoncept140600148/29496890-case-study-words-in-a-circle-or-round-stamp-with-red-ink-to-symbolize-a-business-example-or-anecdote.jpg" alt="sample" class="image">
            </div>
            <div class="col-lg-8 col-sm-12 btn-col">
                <div class="row row-1">
                    <div class="col-md-6">
                        <button>
                            BTN-1
                        </button>
                    </div>
                    <div class="col-md-6">
                        <button>
                            BTN-2
                        </button>
                    </div>
                </div>
                <div class="row row-2">
                    <div class="col-md-6">
                        <button>
                            BTN-3
                        </button>
                    </div>
                    <div class="col-md-6">
                        <button>
                            BTN-4
                        </button>
                    </div>
                </div>
            </div>      
      </div>
    </div>

</body>
</html>

相同的CSS：

.img-col, .btn-col {
    border: 2px solid black;
}

.row .img-col {
    text-align: center;
}

.img-col .image {
    width: 30%;
    height: auto;
}

.btn-col {
    text-align: center; 
    padding-top: 2%;
}

.btn-col .row-1{
    margin-bottom: 5px;
}

这将使它看起来像这样：

如何在右侧创建响应图像和按钮？

3 个答案: