Question

如何将文本（列表）与右侧对齐，并使其上方的图像也与右侧对齐，但是它们都固定并且距离屏幕左侧10％。我也希望修复这两个元素。我有一个codepen，如果有人想要一个链接，但它超级简单，没有我想要的效果。我基本上只想把它作为我的＃34;标题＆＃34;然后让站点的主体位于其右侧。例如：

        ########             body------->
        #      #
        #      #             body------->
        #      #
        ########             body------->


                             body------->


          Item 1             body------->
          Item 2
   Item Number 3
         Item #4             body------->

Answer 1

我有JSFiddle你可以看一下。

HTML

<div id="header">
  <img src="http://placehold.it/100x100">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item Number 3</li>
    <li>Item #4</li>
  </ul>
</div>
<div id="body">
  BODY
</div>

CSS

#header,
#body {
  display: inline-block;
}

#header {
  width: 40%;
  float: left;
  text-align: right;
}

#header img,
#header ul {
  padding-right: 10%;
}

ul  {
    list-style: none;
}

#body {
  width: 60%;
  float: right;
}

标题和正文的宽度可以更改为您想要的任何内容。如果你还想做其他事情，请告诉我。

您还可以将padding-right: 10%;更改为margin-right: 10%，具体取决于您申请的CSS。

将图像对齐到与文本对齐的右边距相同的边距

1 个答案: