Question

我正在尝试使用 CSS 在一个框中放置两个块。我已经成功地将第一列定位为z-index，但我正在寻找更优雅的解决方案：

<style type="text/css">
   h3 {color: #990000; font-family: Lucida, Myriad, Verdana, Arial, Helvetica, sans-serif;     font-size: 12px; font-weight: bold; }
   #main {float: auto; padding: 20px; margin: 0px; background:#eaeaea; max-width: 650px;}
   #box {width: float; height: float; background-color: white; padding: 8px 20px 30px    200px; border-radius: 10px;  box-shadow: 3px 3px 3px rgba(0,0,0, 0.5);}
   #img {position: absolute; left: 60px; top: 85px; z-index: 2;}
</style>
<body>
   <div id ="main">
   <div id ="box">
   <div id = "img"> <img src="/images/bra.jpg" width="150" height="161" alt="test"></div>
   <h3>Lorem Ipsum</h3>
   Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin.Lorem Ipsum är en     
   utfyllnadstext från tryck- och förlagsindustrin.Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin.Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin.Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin.Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin.Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin.
</body>

提前感谢任何线索！

Answer 1

我已经创建了css类。请检查它是否有效。

JSFiddle：click here

由于 Pranav

<style>
h3 {color: #990000; font-family: Lucida, Myriad, Verdana, Arial, Helvetica, sans-serif;     font-size: 12px; font-weight: bold; }
   #main {border:1px solid red; padding: 20px; margin: 0px; background:#eaeaea; max-width: 650px; overflow:hidden;}
   #box {border:1px solid black; background-color: white; border-radius: 10px;  box-shadow: 3px 3px 3px rgba(0,0,0, 0.5); padding:20px; overflow:hidden; display: table;}
   #img {border:1px solid brown;  width:39%; display: table-cell;
vertical-align: middle; text-align:center; }
#content{border:1px solid brown; display: table-cell;  width:59%;}
</style>

<div id ="main">
   <div id ="box">
   <div id = "img"> <img src="/images/bra.jpg" width="150" height="161" alt="test"></div>
       <div id="content"><h3>Lorem Ipsum</h3>
   Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin.Lorem Ipsum är en     
   utfyllnadstext från tryck- och förlagsindustrin.Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin.Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin.Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin.Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin.Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin.</div> 
       </div>
       </div>

Answer 2

这个解决方案怎么样？

JSFiddle：http://jsfiddle.net/pB9rU/

<style>
img {float: left;}
img ~ * {margin-left: 170px;}
</style>

<img src="/images/bra.jpg" width="150" height="161" alt="test">
<h3>Lorem Ipsum</h3>
<p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin.Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin.Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin.Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin.Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin.Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin.Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin.
<p>Lorem ipsum...

Answer 3

#main {
   background: none repeat scroll 0 0 #EAEAEA;
   margin: 0;
   max-width: 650px;
   padding: 20px;
}
#box {
   background-color: #FFFFFF;
   border-radius: 10px;
   box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
   padding: 8px 20px 30px 200px;
   position: relative;
}
#img {
   border: 1px solid;
   bottom: 0;
   left: 60px;
   padding: 25px 55px;
   position: absolute;
   top: 0;
   z-index: 2;
}

一个框内的两列

3 个答案: