作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
最佳答案
结构
<section>
<div class="columns">
<div class="column is-7">
<!-- Image -->
</div>
<div class="column is-5">
<!-- My hero -->
</div>
</div>
</section>
<section>
<div class="columns">
<div class="column is-5">
<!-- My hero -->
</div>
<div class="column is-7">
<!-- Image -->
</div>
</div>
</section>
(根据您的需要更改CSS)
.myBg {
background-color: #273238;
color: white;
border: 1px solid white;
}
.myHero .hr {
display: inline-block;
width: 100px;
height: 15px;
background: white;
border-radius: 20px;
margin-bottom: 15px;
}
.myHero h1 {
font-size: 50px
}
.myHero.hero-right {
padding-right: 100px;
text-align: right;
}
.myHero.hero-left {
padding-left: 100px;
}
@media(max-width: 768px) {
.myHero {
padding: 100px 50px !important;
//text-align: left !important;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
<section class="myBg">
<div class="columns is-vcentered">
<div class="column is-7">
<figure class="image is-4by3">
<img src="/image/WpMdM.png" alt="">
</figure>
</div>
<div class="column is-5">
<div class="myHero hero-right">
<div class="hr"></div>
<h1>BOOST</h1>
<ul>
<li>This is the cooles thing.</li>
<li>I am gonna do in my entire life. Awesome!</li>
<li>Achievements are good as heaven. I want it soon.</li>
</ul>
</div>
</div>
</div>
</section>
<section class="myBg">
<div class="columns is-vcentered">
<div class="column is-5">
<div class="myHero hero-left">
<div class="hr"></div>
<h1>BOOST</h1>
<ul>
<li>This is the cooles thing.</li>
<li>I am gonna do in my entire life. Awesome!</li>
<li>Achievements are good as heaven. I want it soon.</li>
</ul>
</div>
</div>
<div class="column is-7">
<figure class="image is-4by3">
<img src="/image/WpMdM.png" alt="">
</figure>
</div>
</div>
</section>
关于html - Bulma - 如何将图像和文本内联,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47969017/
我是一名优秀的程序员,十分优秀!