将图像与向右对齐的文本对齐到同一页边距



如何将文本(列表)向右对齐,并使其上方的图像也向右对齐,但使它们都固定在距离屏幕左侧10%的位置。我还希望这两个元素都是固定的。如果有人想要链接到它,我有一个代码笔,但它超级简单,没有我想要的效果。我基本上只想把它作为我的"标题",然后把网站的主体放在它的右侧。例如:

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

                             body------->

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

我有一个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;
}

页眉和正文的宽度可以根据您的意愿进行更改。如果你想做其他事情,请告诉我。

您也可以根据所应用的CSS将padding-right: 10%;更改为margin-right: 10%

相关内容

  • 没有找到相关文章

最新更新