Question

我正在创建一个文本换行类型的东西（不知道正确的术语），例如Image of what i am trying to design. 使用此代码，我成功设计了带有文本的绿色框，但我不知道如何添加显示在框右下角的图像（android 徽标图像）。

this is example of what i have done

我的 html 代码 -

    <div class="mbr-overlay" mbr-if="overlay && bg.type!== 'color'" mbr-style="{'opacity': overlayOpacity, 'background-color': overlayColor}">
    </div>
    <div mbr-class="{'container': !fullWidth, 'container-fluid': fullWidth}">
        <div class="row justify-content-center">
            <div class="card col-md-12 col-lg-{{contentWidth}}">
                <div class="card-wrapper">
                    <div class="card-box align-left">
                        <h4 class="card-title mbr-fonts-style mbr-white mb-3" mbr-theme-style="display-5" mbr-if="showTitle" data-app-selector=".card-title, .card-box">
                            <b>
</b><div>Types of Application development.</div></h4>
                        <p class="mbr-text mbr-fonts-style" mbr-theme-style="display-7" mbr-if="showText" data-app-selector=".mbr-text, .mbr-section-btn">&nbsp;Following types of Android apps : 
<br>1. Educational Apps.
<br>2. Entertainment Apps.
<br>3. Utility Apps.
<br>4. Business Apps</p>
                        <div mbr-buttons mbr-theme-style="display-4" class="mbr-section-btn mt-3" mbr-if="showButtons" data-toolbar="-mbrBtnMove">
                            <a class="btn btn-primary" href="https://mobiri.se" data-app-placeholder="Type Text">Start
                                Now</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

和 css -

  & when not (@fullScreen) {
  padding-top: (@paddingTop * 1rem);
  padding-bottom: (@paddingBottom * 1rem);
}

& when (@bg-type = "color") {
  background-color: @bg-value;
}

& when (@bg-type = "image") {
  background-image: url(@bg-value);
}

.card-wrapper {
  background: @wrapBgColor;
  border-radius: 4px;

  @media (max-width: 767px) {
    padding: 1rem;
  }

  @media (min-width: 768px) and (max-width: 991px) {
    padding: 2rem;
  }

  @media (min-width: 992px) {
    padding: 4rem;
  }
}

.mbr-text, .mbr-section-btn {
  color: #ffffff;
}

.card-title, .card-box {
  text-align: left;
}

Answer 1

我建议您在 CSS 中使用 Flex Box 显示，并为内容使用 div 标签，为 android 徽标使用单独的 div 标签。使用我在示例中显示的相同格式，您将能够将图像复制到网站中。

下面是一个例子：

<div class="wrapper">
    <div class="content">
        <h1>Types of Application Development</h1>
        <h3>Following types of development:</h3>
        <p class="application-development">1. Educational Apps</p>
        <p class="application-development">2. Entertainment Apps</p>
        <p class="application-development">3. Utility Apps</p>
        <p class="application-development">4. Business Apps</p>
    </div>
    <div class="image-position">
        <img src="android.png" alt="Android Logo">
    </div>
</div>

这是CSS：

    .wrapper{
    height: 500px;
    width: 100%;
    background-color: green;
    display: flex;
}

.content{
    /* border: 5px solid #45f3ff; */
    flex: 1;
}

.content h1{
    padding-top: 15%;
    color: white;
    text-align: center;
}

.content h3{
    padding-top: 5px;
    color: white;
    text-align: center;
}

.content .application-development{
    padding-left: 30%;
    color: white;
}

.image-position{
    flex: 1;
}

.image-position img{
    padding-top: 39%;
    padding-left: 66%;
}

Answer 2

有Andriod的图片或svg并应用

position: absolute;
bottom: 5px;
right: 5px;

初学者的 html css 设计问题

2 个答案: