当前位置：文江博客话题详情

如何将两个图像放置在一个div的对角

发布于 2024-11-08 01:23:27 字数 124 浏览 1 评论 0原文

如您所见，我不是 CSS 专家，我需要一些帮助来了解如何使用两个图像制作这个 div，如下图所示

“在此输入图像描述”

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

残花月 2024-11-15 01:23:27

托马斯是对的，但还有一个更好的解决方案：

<style type="text/css">

    #content {width: 500px;}

    .align-left { float: left; }
    .align-right { float: right; }

</style>

<div id="content">

    <img class="align-left" src="link to your image" alt="description of your image" width="100" height="100" />
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <img class="align-right" src="link to your image" alt="description of your image" width="100" height="100" />
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div><!-- end content -->

在这种情况下，类比 ID 更有用。

Thomas is right but there's a even better solution:

<style type="text/css">

    #content {width: 500px;}

    .align-left { float: left; }
    .align-right { float: right; }

</style>

<div id="content">

    <img class="align-left" src="link to your image" alt="description of your image" width="100" height="100" />
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <img class="align-right" src="link to your image" alt="description of your image" width="100" height="100" />
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div><!-- end content -->

class are more usefull than ID in this case.

回复收藏 0 原文

夜血缘 2024-11-15 01:23:27

<style type="text/css">
#container {
   width:760px;
   border:1px solid #999;
   margin:20px auto 0;
   overflow:hidden;
 }
#top-left {
   float:left;
 }
#bottom-right {
   float:right;
   clear:both;
 }
</style>

</head>
<body>

<div id="container">
  <img id="top-left" src="" alt="">
  <img id="bottom-right" src="" alt="">
</div>

<style type="text/css">
#container {
   width:760px;
   border:1px solid #999;
   margin:20px auto 0;
   overflow:hidden;
 }
#top-left {
   float:left;
 }
#bottom-right {
   float:right;
   clear:both;
 }
</style>

</head>
<body>

<div id="container">
  <img id="top-left" src="" alt="">
  <img id="bottom-right" src="" alt="">
</div>

回复收藏 0 原文

不语却知心 2024-11-15 01:23:27

您需要左右浮动图像。

这是 CSS：

img {width:100px; height:100px; border:1px solid; margin:1em;}

.image1 {float:left;}
.image2 {float:right;}

floats 需要设置显式宽度

这是一个包含所有内容的 jsfiddle：

编辑：更新了 jsfiddle 以包含周围的 div

http://jsfiddle.net/RQp5Z/1/

You need to float the images right and left.

Here is the CSS:

img {width:100px; height:100px; border:1px solid; margin:1em;}

.image1 {float:left;}
.image2 {float:right;}

floats need explicit widths set

Here is a jsfiddle with it all:

EDIT: updated the jsfiddle to include a surrounding div

http://jsfiddle.net/RQp5Z/1/

回复收藏 0 原文

淡紫姑娘！ 2024-11-15 01:23:27

由于您不是 CSS 人员，因此创建此示例是为了帮助您了解 div http://jsfiddle.net/hT9xV/9/

回复收藏 0 原文

思念绕指尖 2024-11-15 01:23:27

使用下面所示的代码可以彼此相对地显示两个图像。该解决方案假设两个图像需要位于同一行。

.section-container {
    width: 100%;

    .align-left {
      float: left;
    }

    .align-right {
      float: right;
    }
}

div class="section-container">
    <img class="align-left" src="assets/images/foo.svg" width="165px" alt="Foo">
    <img class="align-right" src="assets/images/bar.jpg" width="90px" alt="Bar">
</div>

Two images can be displayed opposite to each other using the code shown below. This solution assumes the need for both images to be on the same line.

.section-container {
    width: 100%;

    .align-left {
      float: left;
    }

    .align-right {
      float: right;
    }
}

div class="section-container">
    <img class="align-left" src="assets/images/foo.svg" width="165px" alt="Foo">
    <img class="align-right" src="assets/images/bar.jpg" width="90px" alt="Bar">
</div>

回复收藏 0 原文

~没有更多了~