图片上方的职位

Question

我需要创建类似下图的内容，而不使用诸如bootstrap之类的框架。 基本上，我需要图像不是全角，而是要占据80％的屏幕，并且网页标题必须在该图像上方。目前，我所有的内容都在整个页面中流淌。

当我缩小屏幕时，它也应该保持不变。

我不知道为什么简单的事情对我不起作用...

php artisan migrate

.container {
  width: 100%;
}


}
#main {
  background: red;
  width: 80%;
  margin: 0 auto;
}
img {
  max-width: 100%;
  width: 80%;
  float: right;
  display: block;
}

Answer 1

我会在容器中使用flex，因此您可以交换订单，这是一种比浮动方式更先进的方式来放置物品，然后在行内插入行号

请注意，您的图片标签无效-img标签已自动关闭

.container {
  width: 100%;
  display: flex;        /* make the container flex */
  flex-direction: row;  /* align the children in a row */
}

#img-div {
  max-width: 85%;      /* 85% width */
  flex-basis: 85%;
  order: 2;            /* put this div 2nd */
}

#image {
  display: block;
  width: 100%;         /* make div stretch size of div */
}

#pagetitle {
  box-sizing: border-box;   /* make this div 15% width with a bit of padding */
  padding: 20px;
  max-width: 15%;
  flex-basis: 15%;
  order: 1;                 /* put this div 1st */
  
  display: flex;            /* make this flex for vertical aligning and align children in a column */
  flex-direction: column;
  justify-content: center;  /* vcertical align center (only works with flex) */
  overflow: visible;        /* show overflow */
  position: relative;       /* make overflow appear on top of image */
  z-index: 2;
}

#title {
  font-size: 20px;
  font-weight: normal;
}

.tag-holder {
  position: relative;
}

.tagline {
  display: inline-block;         /* make inline block so you can add white background */
  white-space: nowrap;
  font-size: 30px;
  font-weight: bold;
  text-transform: uppercase;
  background: white;
  padding:0.1em 0.5em;
}

<div id='main'>

  <div class='container'>

    <!--Image-->

    <div id='img-div'>
      <img id='image' src='https://www.projectarm.com/wp-content/uploads/2018/01/Frida-Kahlo-Vogue-1939-New-York-foto-di-Nickolas-Murray-2.jpg' />
    </div>

    <!--Title-->

    <div id='pagetitle'>
      <h1 id='title'>Emilia<br>Cole</h1>
      <div class="tag-holder">
        <span class='tagline'>Twist</span>
        <span class='tagline'>in my</span>
        <span class='tagline'>reality</span>
      </div>
    </div>

    <!--End Title-->

  </div>


  <div id='tribute-info'>

    This is my main information about the person
    <a href='' id='tribute-link' target="_blank">This is a link for more information</a>

  </div>

没有弹性：

.container {
  width: 100%;
  position: relative;
}

.container:after {
  content: '';
  display: block;
  height: 0;
  clear: both;
  overflow: hidden;
}

#img-div {
  width: 85%;
  /* 85% width */
  float: right;
}

#image {
  display: block;
  width: 100%;
  /* make div stretch size of div */
}

#pagetitle {
  position:absolute;  /* this is for 100% height */
  top:0; bottom:0;
  left:0;
  right:15%;
  overflow: visible;
  z-index: 2;
}

.center {             /* center text vertically */
  position:absolute;
  top:50%;
  left:20px;
  transform:translateY(-50%);
}

#title {
  font-size: 20px;
  font-weight: normal;
  margin-top:0;
}

.tag-holder {
  position: relative;
}

.tagline {
  display: inline-block;
  /* make inline block so you can add white background */
  white-space: nowrap;
  font-size: 30px;
  font-weight: bold;
  text-transform: uppercase;
  background: white;
  padding: 0.1em 0.5em;
}

<div id='main'>

  <div class='container'>

    <!--Image-->

    <div id='img-div'>
      <img id='image' src='https://www.projectarm.com/wp-content/uploads/2018/01/Frida-Kahlo-Vogue-1939-New-York-foto-di-Nickolas-Murray-2.jpg' />
    </div>

    <!--Title-->

    <div id='pagetitle'>
      <div class="center">
        <h1 id='title'>Emilia<br>Cole</h1>
        <div class="tag-holder">
          <span class='tagline'>Twist</span><br>
          <span class='tagline'>in my</span><br>
          <span class='tagline'>reality</span>
        </div>
      </div>
    </div>

    <!--End Title-->

  </div>


  <div id='tribute-info'>

    This is my main information about the person
    <a href='' id='tribute-link' target="_blank">This is a link for more information</a>

  </div>

Answer 2

尝试将此图片标题放在顶部

.container {
  width: 100%;
}

}
#main {
  background: red;
  width: 80%;
  margin: 0 auto;
}

img {
  max-width: 100%;
  width: 80%;
  float: right;
  display: block;
}
#img-caption{
    position: absolute;
    left: 50%;
    margin-left: -50px; /* margin is -0.5 * dimension */
    }

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tribute Page</title>
</head>
<body>
  <div id='main'>
    <div class = 'container'>
      <!--Image-->
     <div id='img-div'>
      <img id='image' src='https://www.projectarm.com/wp-content/uploads/2018/01/Frida-Kahlo-Vogue-1939-New-York-foto-di-Nickolas-Murray-2.jpg'/>
        <div id='img-caption' class='alert alert-info'>This is a caption for the image</div>
    </div>
    <!--Title-->
    <div id='pagetitle'>  
    <h1 id='title'>Frida Kahlo</h1>
      <span id ='tagline'>A short Tribute</span>
    </div>
    <!--End Title-->
  </div>
    <div id ='tribute-info'>
      This is my main information about the person
      <a href = '' id ='tribute-link' target="_blank">This is a link for more information</a>
    </div>
  </div>
</body>
</html>

Answer 3

我能够简单地通过以下方式解决此问题：给容器元素一个相对的位置，给我的标题#pagetitle元素一个绝对的位置，然后将标题顶部定位：30px，左边30px相对于我的容器元素。这样，我的标题是相对于容器而不是页面放置的-如果我没有给出标题相对于容器的相对位置，情况将会是这样。

    .container {
  height: 90vh;
  min-height: 410px;
  margin-top: 40px;
  position: relative;
}

#pagetitle {
  font-size: 2em;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  position: absolute;
  top: 30px;
  left: 30px;
}

我还提高了容器的高度，以确保内容不会在容器周围流动。

这可以通过CSS Grid轻松完成，CSS Grid也是一种更现代的技术，但是我宁愿坚持传统的定位方式，以在跳过步骤和使用更简单的网格系统之前学习并完全理解它们。

整个笔和结果可以在这里看到：https://codepen.io/commiesar/pen/GBMLza?editors=1100