主页 / 问题 / 1075255
Accepted
Ram Ce
Asked:2020-01-28 14:57:52 +0000 UTC2020-01-28 14:57:52 +0000 UTC

调整浏览器窗口大小时阻止屏幕消失

  • 772

在全屏上，一切看起来像这样：在此处输入图像描述. 当浏览器窗口的宽度缩小时，一切看起来是这样的：在此处输入图像描述 请帮忙整理一下。这样在全屏时“屋顶”就会全屏显示，当屏幕缩小时，您至少可以向左滚动以查看文本。谢谢

.content-about {
    display: flex;
    justify-content: space-around;
}

.about-title {
    width: 400px;
    color: white;
}

.about-title h3,
h4 {
    font-weight: 400;
}

.figure-about {
    height: 300px;
    width: 600px;
    margin: 15px 15px 0 0;
    background: #B1BA5C;
    position: relative;
}

.figure-about:before {
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    left: 0;
    top: -100px;
    border-bottom: 100px solid #B1BA5C;
    border-left: 300px solid transparent;
    border-right: 300px solid transparent;
}
<div class="about">
        <div class="content-about">
            <div class="row">
                <div class="about-title">
                    <h3>Ремонт квартир</h3>
                    <h4>Ремонт квартир, офисов, коттеджей под ключ в Санкт-Петербурге и ЛО</h4>
                </div>
            </div>

            <div class="row">
                <div class="with-figure-about">
                    <div class="figure-about">
                    </div>
                </div>
            </div>
        </div>
    </div>

html

1 个回答

  1. Best Answer

    像这样的东西 - 我不知道最终结果

    nav{
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 60px;
}

nav a{
  text-decoration: none;
  font-weight: 700;
  font-family: sans-serif;
}

.items{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
}

.items .item{
  width: 100%;
}

@media(max-width: 768px){
  h2{
    font-size: 20px;
  }
  h4{
    font-size: 14px;
  }
}
    <nav>
  <a href="#">О нас</a>
  <a href="#">Цена</a>
  <a href="#">Гарантии</a>
  <a href="#">Контакты</a>
</nav>

<div class="items">
  <div class="item">
    <h2>Ремонт квартир</h2>
    <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur ipsa hic, suscipit aut optio voluptatibus totam aliquam quas corrupti placeat!</h4>
  </div>
  <div class="item">
    <svg viewBox="0 0 400 250">
        <path d="M200,0 400,100 400,250 0,250 0,100" 
              fill="#B1BA5C" />
      </svg>
  </div>
</div>

    • 1

相关问题