如何使用HTML和CSS以响应方式定位文本和图像

cyvaqqii 于 2023-01-14 发布在其他

关注(0)|答案(1)|浏览(173)

我试图在我的网站上定位这张图片和文字。我怎样才能使它React灵敏，使比例在不同的设备上不会改变，一切都保持在同一位置。我是新手，所以我可能犯了很多错误。

div.content {
  width: 100vw;
  display: flex;
}

div.column1 {
  width: 15%;
  background-color: #F7F7F7;
  overflow: hidden;
  height: 100vh;
}

div.column2 {
  width: 70%;
  overflow: hidden;
}

.lobby {
  width: 45%;
  height: 45%;
  padding-top: 5.6rem;
  padding-left: 1rem;
}

.title {
  padding-top: 4.7rem;
  display: inline-block;
  float: right;
  width: 50%;
  font-size: 1.8rem;
}

.descr {
  display: inline-block;
  width: 30vw;
  float: right;
  font-size: 1rem;
  padding-top: 0.4rem;
}

<div class="content">

  <div class="column1">

  </div>

  <div class="column2">

    <div class="title">Installations
      <p class="descr"> We are a gym based in Carballo, A Coruña, counting with an installation </p>
    </div>
    <img class="lobby" src="img/lobby.jpg" alt="photo of the lobby of the gym" />
  </div>

</div>

<div class="column1">

</div>

正如你所看到的，我试图把图片和文字放在我网站的中间一行，因为它被分为3列。
我能做的任何事情来改进代码，使它更有React力.谢谢！

css

来源：https://stackoverflow.com/questions/75106120/how-to-position-text-and-images-in-a-responsive-way-with-html-and-css

1条答案

按热度按时间

qlckcl4x1#

我的方法首先定义 Package 器布局（容器），然后处理内容布局（ Package 器上嵌套的2列）。
下面是我的做法：
超文本标记语言

<div class="main-container container">
    <div class="inner-container content">
        <div class="column-left column column-1">
            <img class="lobby" src="https://upload.wikimedia.org/wikipedia/en/c/cb/Placeholder_logo.png" alt="photo of the lobby of the gym">
        </div>
        <div class="column-right column column-2">
            <h1 class="title">Installations</h1>
            <p class="descr">We are a gym based in Carballo, A Coruña, counting with an installation </p>
        </div>
    </div>
</div>

中央支助系统

<style>
html,
    body {
        padding: 0px;
        margin: 0px;
    }

    /* set the layout */
    .main-container {
        width: 100%;
        max-width: 100vw;
        min-height: 100vh;
        box-sizing: border-box;
        padding-left: 15%;
        padding-right: 15%;
        position: relative;
    }

    /* this is a pseudo element, it renders the grey background on the left */
    .main-container:before {
        content: "";
        display: block;
        height: 100%;
        background-color: #F7F7F7;
        /* same width of padding-left as it covers only the left side */
        width: 15%;
        position: absolute;
        z-index: 1000;
        top: 0;
        left: 0;
    }

    .inner-container {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding: 2rem 1rem 0;
        box-sizing: border-box;
    }

    .column {
        padding: 3.6rem 0 1rem;
        box-sizing: border-box;
        /* Column width - Change this with media Queryes */
        width: 50%;
        flex-basis: 50%;
    }

    /* page elements*/
    .title {
        font-size: 1.8rem;
        margin-top: 0px;
    }

    .descr {
        font-size: 1rem;
        padding-left: 3rem;
    }

    .lobby {
        width: 45%;
        height: auto;
    }

    /* responsive media query */
    /* decide the breakpoint to start having 1 column */
    @media screen and (max-width: 767px) {
        .column {
            width: 100% !important;
            flex-basis: 100%;
        }
    }
</style>

下面是一个工作的Codepen：https://codepen.io/Davevvave/pen/BaPZRbb
考虑@Sfili_81的建议，首先研究和学习@media_queries（https://www.w3schools.com/css/css3_mediaqueries_ex.asp），避免浮动，（我建议）尝试理解HTML呈现通量的自然行为，HTML标记的语义含义，并使用CSS增强所有功能。

赞(0）回复(0）举报 2023-01-14

我来回答

如何使用HTML和CSS以响应方式定位文本和图像

1条答案

相关问题

热门标签

最新问答