Fatal编程技术网
  • html/
  • Html 将div与CSS并排对齐

Html 将div与CSS并排对齐

html css

Html 将div与CSS并排对齐,html,css,Html,Css,我想将我的三个中间div元素并排放置，中间div的宽度是最大的，其他两个是固定大小的 <div> <div style="width:50px; height; 50px;">Image</div> <div>Some Text</div> <div style="width:20px; height; 50px;">Image</div> </div> 形象 一些文本 形

我想将我的三个中间div元素并排放置，中间div的宽度是最大的，其他两个是固定大小的

<div>
    <div style="width:50px; height; 50px;">Image</div>
    <div>Some Text</div>
    <div style="width:20px; height; 50px;">Image</div>
</div>


形象
一些文本
形象
我感觉你没有用谷歌搜索这个，但是我感觉很好

对不起，这里有一个JSFIDLE正在工作

我有一种感觉，你没有尝试用谷歌搜索这个，但是，我感觉很好

对不起，这里有一个JSFIDLE正在工作

有几种解决方案

  • 其他，只需谷歌搜索3列CSS
      • 有几种解决方案

      • 其他，只需谷歌搜索3列CSS
          • 这对我来说很有效：

          <html>
    <head>
        <style type="text/css">
            div {
                color: white;
                font-size: 14px;
                font-weight: 800;
            }

            div.end {
                width: 50px;
                height: 50px;
            }

            div.left {
                float: left;
                background: red;
            }

            div.right {
                float: right;
                background: blue;
            }

            div.container {
                background: green;
                height: 50px;
            }
        </style>
    </head>
    <body>

        <div class="container">
            <div class="end left">Image</div>
            Some Text
            <div class="end right">Image</div>
        </div>
    </body>
</html>

          
div{
颜色：白色；
字体大小：14px；
字号：800；
}
分区结束{
宽度：50px；
高度：50px；
}
左分区{
浮动：左；
背景：红色；
}
右分区{
浮动：对；
背景：蓝色；
}
分区集装箱{
背景：绿色；
高度：50px；
}
形象
一些文本
形象
          这对我很有用：

          <html>
    <head>
        <style type="text/css">
            div {
                color: white;
                font-size: 14px;
                font-weight: 800;
            }

            div.end {
                width: 50px;
                height: 50px;
            }

            div.left {
                float: left;
                background: red;
            }

            div.right {
                float: right;
                background: blue;
            }

            div.container {
                background: green;
                height: 50px;
            }
        </style>
    </head>
    <body>

        <div class="container">
            <div class="end left">Image</div>
            Some Text
            <div class="end right">Image</div>
        </div>
    </body>
</html>

          
div{
颜色：白色；
字体大小：14px；
字号：800；
}
分区结束{
宽度：50px；
高度：50px；
}
左分区{
浮动：左；
背景：红色；
}
右分区{
浮动：对；
背景：蓝色；
}
分区集装箱{
背景：绿色；
高度：50px；
}
形象
一些文本
形象
          使用CSS定位，特别是绝对定位：绝对定位最左侧和最右侧的元素，并使用
          边距
          为它们保留空间

          这假定中间柱始终比其他柱高：

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Align divs side by side with CSS</title>
    <style type="text/css">
        div { border:1px solid red; } /* just for demo purposes */
    </style>
</head>
<body>
    <div style="position: relative; top: 0px; left: 0px;">
        <div style="position:absolute; left:0px; top:0px; width:50px; height:50px;">Image</div>
        <div style="margin-left:50px;margin-right:20px;">Some Text <br />Some Text <br />Some Text <br />Some Text <br />Some Text <br />Some Text <br />Some Text <br />Some Text <br />Some Text <br />Some Text <br /></div>
        <div style="position:absolute; top:0px; right:0px; width:20px; height:50px;">Image</div>
    </div>
</body>
</html>

          
将div与CSS并排对齐
div{border:1px纯红；}/*仅用于演示目的*/
形象
一些文本
          一些文本
          一些文本
          一些文本
          一些文本
          一些文本
          一些文本
          一些文本
          一些文本
          一些文本
          
形象
          使用CSS定位，特别是绝对定位：绝对定位最左侧和最右侧的元素，并使用
          边距
          为它们保留空间

          这假定中间柱始终比其他柱高：

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Align divs side by side with CSS</title>
    <style type="text/css">
        div { border:1px solid red; } /* just for demo purposes */
    </style>
</head>
<body>
    <div style="position: relative; top: 0px; left: 0px;">
        <div style="position:absolute; left:0px; top:0px; width:50px; height:50px;">Image</div>
        <div style="margin-left:50px;margin-right:20px;">Some Text <br />Some Text <br />Some Text <br />Some Text <br />Some Text <br />Some Text <br />Some Text <br />Some Text <br />Some Text <br />Some Text <br /></div>
        <div style="position:absolute; top:0px; right:0px; width:20px; height:50px;">Image</div>
    </div>
</body>
</html>

          
将div与CSS并排对齐
div{border:1px纯红；}/*仅用于演示目的*/
形象
一些文本
          一些文本
          一些文本
          一些文本
          一些文本
          一些文本
          一些文本
          一些文本
          一些文本
          一些文本
          
形象
          这可能有效：（但在ie7中不正确）

          
形象
这里有一些文字
形象
          这可能有效：（但在ie7中不正确）

          
形象
这里有一些文字
形象
          你必须为每个具有高度和宽度属性的div使用float left

          你必须为每个具有高度和宽度属性的div使用float left

          ，这根本没有回答他的问题。@smdrager-说实话，从来没有人问过问题。标题是一个即将出现的问题的声明性陈述，然后给出的只是一个OP想要什么的声明性陈述。您可能会争辩说，这个答案信息量不大，也没有什么帮助，但至少有几个版本的IE.works in 6+中不支持跨浏览器内联块。。。因此，删除内联块后，它仍然有效-1因为没有跨浏览器是愚蠢的。@zobgib，这是因果报应。如果你投了别人的票，你自己也可能会被投下吗？哈哈。我的解决方案仍然有效=p根本没有回答他的问题。@smdrager-说实话，从来没有人问过问题。标题是一个即将出现的问题的声明性陈述，然后给出的只是一个OP想要什么的声明性陈述。您可能会争辩说，这个答案信息量不大，也没有什么帮助，但至少有几个版本的IE.works in 6+中不支持跨浏览器内联块。。。因此，删除内联块后，它仍然有效-1因为没有跨浏览器是愚蠢的。@zobgib，这是因果报应。如果你投了别人的票，你自己也可能会被投下吗？lol.My solution仍然有效=PYou可能想使用height:而不是height；如果这是您的实际代码，您可能希望使用height:而不是height；在本例中，这是您的实际代码。如果文本像他的codeTrue那样被包装在div中，那么这就不起作用。有时，最初的想法不是正确的想法或方法。如果文本像codeTrue那样被包装在div中，这就不起作用。有时最初的想法或方法不正确。第一个不太有效，第二个有一个带固定边的弹性中心：）第一个不太有效，第二个有一个带固定边的弹性中心：） 
          <div style="height:300px;background:#ddd;border:1px solid red;float:left;text-align:center" id="container">
  <div style="height:175px;width:100px;background:#CF9;border:1px solid #C0C;float:right" class="box">Image</div>
  <div style="height:150px;width:auto;background:orange;border:1px solid #404040;float:right" class="box">Here is some text</div>
  <div style="height:300px;width:100px;background:green;border:1px solid yellow;float:left;text-align:center" class="box">Image</div>
</div>