中心有一个Div，右边有另一个div

Question

我确定这是非常简单的东西，但我讨厌CSS而且它不会为我打球。

以下是我的网站布局的说明：

目标是让闪光灯居中，并且包含广告的div稍微向右。显而易见，我可以轻松设置Flash和广告之间的差距。

目前，我使用的是容器div，以蓝色虚线显示，闪光灯位于其内部，广告显示：内联块，浮动：右。它的工作原理，但问题是如果浏览器宽度减小到小于蓝色虚线框的位置，左侧的空白区域将被保留，闪光灯和广告将被推向右侧并被切断。我喜欢相反的情况，广告被保留，容器的左侧被切断。

非常感谢所有人的帮助！

Answer 1

你真的应该分享有问题的代码，但从我的理解，你可以尝试类似的东西：

.container {
  text-align: center;
  margin: 0 auto;
}

.flash, .ad {
  display: inline-block;
}

虽然HTML是：

<div class="container">
  <div class="flash"></div>
  <div class="ad"></div>
</div>

Answer 2

使用下面的代码 HTML代码是。

<div id="parent">
    <div id="left">
         <p>flash</p>      
    </div>
     <div id="right">
         <p> advertise</p>        
    </div>
</div>  

和css代码是

       #parent{
    border:1px solid #CC0000;
    overflow:hidden;
     margin:0 auto;
}
#parent div{
    float:left;

}
#left{
    border:1px solid #000;
    margin-left:150px;
    width:300px;
    height:250px;
}
#right{
     border:3px solid #000;
 width:200px;
    height:250px;
}

Answer 3

我已经看到了其他人的答案，我想我找到了解决方案。

<强> CSS：

.container {
    text-align: center;
    padding: 15px 0;
    min-height: 200px;
}

.flash, .ad {
    display: inline-block;
    min-height: 200px;
}

.flash {
    min-width: 300px;
    margin-left: 110px; //this has to be total width of .ad 
}

.ad {
    min-width: 100px;
    margin-left: 10px;
}

<强> HTML：

<div class="container">
  <div class="flash"></div><!--
  --><div class="ad"></div>
</div>

http://jsfiddle.net/wL3wzt8j/2/

由于此代码不能很好地处理你想要做的事情（在小于容器的屏幕上），这是另一个涉及绝对定位的小提琴：

http://jsfiddle.net/wL3wzt8j/3/