相关疑难解决方法(0)

我知道这是一个相当简单的问题,但我无法弄清楚我的生活.我有两个链接,我已经应用了背景图像.这是它目前的样子(为阴影道歉,只是按钮的粗略草图):

但是,我希望这两个按钮并排.我无法弄清楚对齐需要做些什么.

这是HTML

<div id="dB"}>
    <a href="http://notareallink.com" title="Download" id="buyButton">Download</a> 
</div>
<div id="gB">
    <a href="#" title="Gallery" onclick="$j('#galleryDiv').toggle('slow');return false;" id="galleryButton">Gallery</a>     
</div>

这是CSS

#buyButton {
    background: url("assets/buy.png") 0 0 no-repeat;
    display:block;
    height:80px;
    width:232px;
     text-indent:-9999px;
}
#buyButton:hover{
width: 232px;
height: 80px;
background-position: -232px 0;
}
#buyButton:active {
width: 232px;
height: 80px;
background-position: -464px 0;
}

#galleryButton {
    background: url("images/galleryButton.png") 0 0 no-repeat;
    display:block;
    height:80px;
    width:230px;
     text-indent:-9999px;
}
#galleryButton:hover{
width: 230px;
height: 80px;
background-position: -230px 0;
}
#galleryButton:active {
width: 230px;
height: 80px;
background-position: -460px …

我正在一个游戏网站上工作,并希望在"标题"div中放置两个div,使它们水平对齐并位于此容器div的左侧和右侧.请参阅下面的示例:

Oli                                                                             Matt

这是我的尝试.我的错误是什么？

HTML:

<div class="header">
     <div class="playerOne">
     Oli
     </div>
     <div class="playerTwo">
     Matt
     </div>
</div>

CSS:

.header{
  display: inline-block;
}
.playerOne{
    margin-left: 0;
 }

.playerTwo{
  margin-right: 0;
}

我试图<div>在main中使用两个元素<div>.但问题是,在<div>我第一次使用<image>控件时,我会从数据库中获取一些文本数据.第二,<div>我正在使用<gridview>.但是我无法<div>在水平方向上显示这两个元素.

我试过这样做:

<div style="width:1000px;overflow:hidden; height:auto; float:left; text-align:justify; margin-bottom:15px;">
    <div id="right part" runat="server" style="width:auto; float:left; margin:0 12px 12px 0;">
        <asp:Image ID="Image1" runat="server" Height="122px" Width="148px" /><% =details %></div>
    <div id="left part" runat="server" style="float:left;width:auto;display:inline-block;">
        <asp:GridView ID="GridView1" runat="server" ShowHeader="False" 
                      ForeColor="Black" GridLines="None" EnableModelValidation="True" 
                      onpageindexchanging="GridView1_PageIndexChanging" onrowcreated="GridView1_RowCreated">
        </asp:GridView>    
    </div>
</div>

如果我做错了,请建议我？

我需要对齐这些divs,以便div"content1"和红色之间的空格等于"content4"和红色之间的空格div.我不介意改变蓝色div边缘,但这适用于任何宽度.

我曾经通过使4蓝色div的宽度+左右边距= 100%来实现这一点,但在这种情况下似乎不能很好地工作.

我也尝试div在红色的内部添加另一个包含所有蓝色div的并给它margin: 0 auto但是它也不起作用.

jsfiddle中的代码(更新)

PS:如果我不够清楚,请随时编辑我的问题.

我主要是一个后端开发人员,但我正试图让布局正确.基本上我正在创建一个列表视图页面,它将div在左侧包含一个标签,其中包含一堆过滤器(下拉列表,复选框等).在屏幕的右侧,我将有一个div包含网格的标签.这似乎有效,但是当我在头顶上或者我的屏幕没有达到最大值时看起来很糟糕.我这样做了吗？基本上这就是我所追求的:

我为此做的CSS就像这样简单:

.filterContainer {
    width:20%; 
    float:left;
}


.gridContainer {
    width:79%; 
    float:right;
}

基本上.filterContainer是我的左div(dLeft),.gridContainer是我的权利div(dRight).这对我想要实现的目标有效吗？结果如下所示:

http://i.imgur.com/WFasMF1.png

但是,如果我调整窗口大小,我最终会得到以下结果:

http://i.imgur.com/4u9HRlK.png

我认为这是正常的,因为我正在调整大小,但我的CSS是否有效？