不是,是分左右,我想将html页面从的一部分侧分成左右两部分,左边放图片右边放新闻
时间: 2024-03-11 11:48:05 浏览: 266
左右滑动分页
5星 · 资源好评率100%
好的,以下是一个将HTML页面从上到下分成左右两部分的demo,左边放图片,右边放新闻:
```html
<!DOCTYPE html>
<html>
<head>
<title>图片和新闻分栏 Demo</title>
<style>
.container {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
height: 100vh;
}
.image-section {
width: 50%;
padding: 20px;
}
.image-section img {
max-width: 100%;
height: auto;
}
.news-section {
width: 50%;
padding: 20px;
box-sizing: border-box;
}
.news-section h2 {
margin-top: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="image-section">
<img src="https://picsum.photos/500/500" alt="图片">
</div>
<div class="news-section">
<h2>新闻标题</h2>
<p>新闻内容</p>
</div>
</div>
</body>
</html>
```
在这个 demo 中,我们同样使用了 Flexbox 布局来将页面分成两部分,左边是图片部分,右边是新闻部分。我们使用了 `display: flex` 将整个页面容器设为 flex 容器,然后使用 `flex-direction: row` 将其子元素沿水平方向排列。对于左侧的图片部分,我们设置了 `width: 50%` 将其宽度设为容器的一半,同时也为图片部分添加了样式 `max-width: 100%; height: auto;` 来使图片自适应大小。对于右侧的新闻部分,我们同样设置了 `width: 50%` 将其宽度设为容器的一半,并且为其添加了样式 `box-sizing: border-box;` 来使其内边距和边框不会撑开容器。同时,我们也为每个部分添加了样式来使它们看起来更美观。
阅读全文