Question

请check link了解有关我的代码的详细信息。我需要将占位符图像对齐到屏幕左侧，即共享代码所示的银行空白区域。

＆＃13;

* {
  margin: 0;
  padding: 0;
}
main{ 
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
aside { 
  width: 300px;
  height: 100vh;
  background-color: red;
}
article {
  width: 100%;
  max-width: 500px;
  height: 100vh;
  background-color: green;
}

figure {
  padding-top : 50%;
  position:relative;
  img {
    top:0;
    left:0;
    right:0;
    bottom: 0;
    position: absolute;
    max-width: 100%;
    width: 100%;
  }
}

＆＃13;

<main>
  <article>
     <figure>
       <img src="http://via.placeholder.com/350x150" alt="">         </figure>
  </article>
  <aside>

  </aside>
</main>

＆＃13;

Answer 1

你是说这个吗？

* {
  margin: 0;
  padding: 0;
}
main{ 
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
aside { 
  width: 300px;
  height: 100vh;
  background-color: red;
}
article {
  width: 100%;
  max-width: 500px;
  height: 100vh;
  background-color: green;
}

figure {
  padding-top : 50%;
  position:relative;
  img {
    top:0;
    left:0;
    right:0;
    bottom: 0;
    position: absolute;
    max-width: 100%;
    width: 100%;
  }
}
img{
  width:100%
    
}

<main>
  <img src="http://via.placeholder.com/350x150" alt="">
  <article>
     <figure>
             
    </figure>
  </article>
  <aside>

  </aside>
</main>

Answer 2

卸下：

function OpenPopupWindow() {
        var userWidth = screen.availWidth;
        var userHeight = screen.availHeight;
        leftPos = (userWidth - 500) / 2,
            topPos = (userHeight - 500) / 2;
        settings = 'modal,scrollBars=no,resizable=no,titlebar=no,status=no,toolbar=no,menubar=no,location=no,directories=no,left=' + leftPos + ',top=' + topPos + ',width=500, height=500';
        window.open("EnhanceTerms.aspx", "window", settings);
    }

来自CSS中的justify-content: flex-end;。

Answer 3

在.main css中你可以删除justify-content或用flex-start设置它，如果你想在右边的红色部分和左边的图像你可以设置对齐内容空间。

Answer 4

问题在这里。当您设置max-width时，当尺寸超过侧边栏的500px + 300px时，您将获得空白区域。

article {
  width: 100%;
  /*Issue is here.*/
  max-width: 500px;
  height: 100vh;
  background-color: green;
}

要使用相同的代码，您需要将代码调整为此。我将注释掉不必要的部分，以便您在遵循代码时删除它们。

＆＃13;

* {
  margin: 0;
  padding: 0;
}
main{ 
  /*width: 100%;*/
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
aside { 
  width: 300px;
  height: 100vh;
  background-color: red;
}
article {
  /*
  This is fine but use the flexbox syntax flex: 1 or flex-basis: 100% to get the remaining space from aside.
  width: 100%;*
  /
  /*Issue is here.
  max-width: 500px;
  */
  flex: 1;
  height: 100vh;
  background-color: green;
}

figure {
  /*
  Not needed.
  padding-top : 50%;
  position:relative;
  */
  img {
    /*
    top:0;
    left:0;
    right:0;
    bottom: 0;
    position: absolute;
    max-width: 100%;
    width: 100%; 
    */
    /*To make the image responsive and fit figure tag*/
    max-width: 100%;
    height: auto;
  }
}

＆＃13;

<main>
  <article>
     <figure>
       <img src="http://via.placeholder.com/350x150" alt="">         </figure>
  </article>
  <aside>

  </aside>
</main>

＆＃13;

或者重新构建您的标记，使figure + image中的article成为main

图像左对齐

4 个答案: