尝试创建一个有3个div的div容器。顶部（标题），左（进一步分为2个Div）和右 [英] Trying to create a div-container that has 3 divs within it. Top(header) , Left(further divided into 2 Divs) and Right

问题描述

顶部，左侧和右侧的div很好。但是当我尝试将左侧div分成两个div时，右侧div（它有一个图像）正在向下移动。

HTML -

 < div style =width：100 ％> 
< div style =width：100％; height：70px; text-align：center;> 
< h3 style =color：＃525252>无缝整合和灵活的API< / h3> 
< / div> 
< div class =wrap> 
< div class =floatleft> 
< div class =JShover> 
< h3 class =border>适用于您的商业应用程序
< p>连接Office 365，GSuite。< / p>< / h3> 
< / div> 
< div class =JShover> 
< h3 class =border>适用于您的商业应用程序
< p>连接Office 365，GSuite，Zoho，Dropbox等等，让您的团队无需
必须在应用程序之间切换。< / p>< / h3>< / div> 
< div class =floatright> 
< img src =integrations-image.pngwidth =100％height：100px> 
< / div> 
< div style =clear：both;> 
< / div> 
  

CSS -

  .border {
 margin-left：300px; 
 border-left：6px solid＃3793EE; 
} 
 div.JShover {
 width：100％; 
身高：50％; 
 padding-left：-10px; 
 text-align：center; 
} 
 .wrap {
 width：100％; 
} 
 
 .floatleft {
 float：left; 
宽度：50％; 
 height：400px; 
 
} 
 
 .floatright {
 float：right; 
 height：400px; 
宽度：50％; 
} 
  

JShover类用于将LEFT Div分成两半。创建完这两部分后，RIGHT div（包含图像）向下移动到LEFT div下方，而不是移动到其一侧。

请有人请帮助我。

试图实现类似于此的

解决方案

好的，我有一个解决方案，看起来像您的屏幕截图

JSFiddle HERE

你的问题是你没有关闭所有的div在正确的地方。这里是修改的代码：

 < div style =width：100％> 
< div style =width：100％; height：70px; text-align：center;> 
< h3 style =color：＃525252>无缝整合和灵活的API< / h3> 
< / div> 
< div class =wrap> 
< div class =floatleft> 
< div class =JShover> 
< h3 class =border> 
适用于您的商业应用程序
< p>与Office 365，GSuite连接。< / p> 
< / h3> 
< / div> 
< div class =JShover> 
< h3 class =border> 
适用于您的商业应用程序
< p>连接Office 365，GSuite，Zoho，Dropbox等等，让您的团队无需在应用程序之间切换即可签署文档。< / p> 
< / h3> 
< / div> 
< / div> 
< div class =floatright> 
< img src =integrations-image.pngwidth =100％height =100> 
< / div> 
< / div> 
< / div> 
  

很明显，文本看起来不像截图，但是这是因为您创建边界的方式保证金一直在将文本推到右边）

希望这可以解决它：）

The top, left and right divs are fine. But when I try to divide the left div into two divs, the right div (which has an image) is moving down.

HTML-

 <div style="width:100%">
<div style="width:100%;height:70px;text-align:center;">
<h3 style="color:#525252">Seamless integrations and flexible API</h3>
</div>
<div class="wrap">
    <div class="floatleft">
    <div class="JShover">
    <h3 class="border">Works with your business applications
    <p >Connect with Office 365, GSuite.</p></h3>
    </div>
    <div class="JShover">
    <h3 class="border">Works with your business applications
    <p>Connect with Office 365, GSuite, Zoho, Dropbox and many more to let your teams sign documents without
    having to switch between applications.</p></h3></div>
    <div class="floatright">
    <img src="integrations-image.png" width="100%" height:"100px">
    </div>
    <div style="clear: both;">
</div>

CSS-

.border{
    margin-left:300px;
    border-left:6px solid #3793EE;
    }
div.JShover{
    width:100%;
    height:50%;
    padding-left:-10px;
    text-align:center;
    }
.wrap {
    width: 100%;
}

.floatleft {
    float:left; 
    width: 50%;
    height: 400px;

}

.floatright {
float: right;
    height: 400px;
    width: 50%;
}

The JShover class is used to separate the LEFT Div into two equal halves. After creating these two halves, the RIGHT div (contains an image) moves down below the LEFT div instead of being to its side.

Can someone please help me out please.

Trying to achieve something similar to this:

解决方案

Okay I have a solution for this that looks like your screenshot

JSFiddle HERE

Your problem was that you hadn't closed all of the divs in the right places. Here is the amended code:

<div style="width:100%">   
  <div style="width:100%;height:70px;text-align:center;">
    <h3 style="color:#525252">Seamless integrations and flexible API</h3>   
  </div>   
  <div class="wrap">
    <div class="floatleft">
      <div class="JShover">
        <h3 class="border">
          Works with your business applications
          <p >Connect with Office 365, GSuite.</p>
        </h3>
      </div>
      <div class="JShover">
        <h3 class="border">
          Works with your business applications
          <p>Connect with Office 365, GSuite, Zoho, Dropbox and many more to let your teams sign documents without having to switch between applications.</p>
        </h3>
      </div>
    </div>
    <div class="floatright">
      <img src="integrations-image.png" width="100%" height="100">
    </div>
  </div> 
</div>

Obviously the text doesnt look exactly like the screenshot but thats because of the way you have created the border (the margin is pushing the text all the way to the right)

Hope this fixes it :)

这篇关于尝试创建一个有3个div的div容器。顶部（标题），左（进一步分为2个Div）和右的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！