如何中心两个div父DIV中，并确保图像不重叠左DIV

<div class="serviceHolder brClear setCenter"> 
    <div style="float: left; min-width: 30%; max-width: 40%; z-index: 100;"> 
     <div style="display: table; background: url('theImages/talentQuote.png') no-repeat center; background-size: 100% 100%; min-height: 160px; min-width: 160px; text-align: center;"> 
      <div style="color: #FFF; font-weight: bold; vertical-align: middle; display: table-cell; padding: 0 20px; font-family: 'trebuchet MS'"><xsl:value-of select="txtQuote" /></div> 
     </div> 
    </div> 
    <div style="float: left; min-width: 60%; max-width: 50%; padding-top: 70px; text-align: left; z-index: 50;"> 
     <img src="{imgPicture/img/@src}" alt="{txtName}" /> 
    </d

IV> 如何中心两个div父DIV中，并确保图像不重叠左DIV

生成此更小的屏幕上（iphone 5S）：

enter image description here

在桌面屏幕：

enter image description here

非常小的屏幕：

enter image description here

我怎样才能确保

与图像右侧DIV有一个z-index比左DIV 更低，以确保它的报价之下。
报价是调整大小，我怎么也确保图像调整大小和不会从小屏幕上看到切断权利。
居中父DIV内部的两个内部DIV。

来源

2014-10-29 Si8

你能否提供一个JSFiddle和“名称”你的div？因为当有4个嵌套div时，父DIV内的内部DIV比英语更中国... – 2014-10-29 15:42:37

除非div的位置是'relative'，'absolute'或'fixed'，否则'z-index'将不起作用。 '位置：亲戚;''''''''实际上你正在寻找的东西。 – 2014-10-29 15:44:34

JSFiddle：http://jsfiddle.net/djuv4kyr/1/ – Si8 2014-10-29 16:00:00

它看起来像与图像正确的div有白色背景以及删除白色背景并保存为PNG。

要调整img的宽度，并根据需要调整宽度（例如60％），只使用宽度，不要对父div使用min-width和max-width，img的宽度应为100％，显示：块。这样img将调整大小并且不会被剪切。

还添加相对于报价div的位置....这将有助于建立索引。

关于这两个div的中心，你可以使用jsfiddle提供你的代码......除了那个尝试使用div的显示外，很容易看出：inline-block;垂直对齐：顶部;删除浮动和母公司div添加保证金：0汽车

来源

2014-10-29 15:55:32

你能为我创作一个小提琴吗？ http://jsfiddle.net/djuv4kyr/1/ – Si8 2014-10-29 16:00:26

我有蜜蜂能够做出改变，你可以调整屏幕大小，看到IMG正在调整大小，而不是削减.....这两个div都在中心好，我也设置了Z-index。您现在必须进行实际更改才能看到结果 – 2014-10-29 16:22:18

您有小提琴吗？（它是'2'而不是'1'我知道了）当我调整它太小它切断，http://jsfiddle.net/djuv4kyr/2/ – Si8 2014-10-29 16:55:15

如何中心两个div父DIV中，并确保图像不重叠左DIV

回答

相关问题