2013-08-06 110 views
0

我有下面的div代码作为列创建者和分隔符,在这里,当我在我的web浏览器中运行这个,它创建数据重叠或列没有得到正确对齐。这里实际上我想要一个3列布局,在第一和第二列顶部有一个图像。你可以找到它的文件应该看起来像here和小提琴Here。而且我也不想在这里使用表格,只是div应该这样做。请让我知道我哪里错了。对齐问题与div和图像

<!DOCTYPE html> 
<html> 
<head> 

<style type="text/css"> 
div.columns 
    { 
width: 508.326px; 
height:709.268px; 

} 


div.left { 
    width:341px; 
    height:709.268px; 

border-right:dotted; 
float: left; 
} 


div.right { 
    width:167px; 
    height:709.268px; 
    float: right; 
    margin-left: 10px; 
    } 


div.white 
{ 

width:188px; 
float:left; 
height:436.86px; 
    } 




div.grey 
     { 
width:188px; 
float:right; 
height:436.86px; 
} 


div.red   
{ 
width:217px; 
} 

</style> 


</head> 
<body> 
<div class="columns"> 


<div class="left"> 

<div class="image"> 
<img src="../Magazines/Images/Images.jpg" height="380" width="380"/> 
</div> 

    <div class="white" >The English historian Lord Acton 
famously said the “issue which has 
swept down the centuries and which 
will have to be fought sooner or later is 
the people versus the banks”. 
This cannot ring truer than now, with 
many banks, particularly the biggest 
ones, in the public spotlight facing 
a wide range of investigations and 
litigations, following the 2007-2008 
global financial crisis. And as Mr. 
Longo puts it, that is all just part of 
doing business at the moment if you 
are a financial institution such as 
Deutsche Bank. 
“Since the GFC (global financial 
crisis), the industry has gone through 
tremendous change on a variety of 
fronts,” he tells Hong Kong Lawyer 
one grayish morning last month in 
Thomson Reuters’ office in Central. 
“So we have to deal with investigations 
and litigations on the one hand, and 
on the other hand adapt our model 
to see how we can reorganise and 
restructure the institution to comply 
with the variety of regulatory changes 
as well as develop existing and new 
business opportunities to replace 
income streams that are no longer 
viable.” </div> 
<div class="grey">And to make it even more challenging, 
a grayish macro-economic backdrop 
where the economy remains weak in 
Europe while recovering slowly in the 
US. 
“There are also challenges driven by the 
plethora of reforms coming out of the 
G20 commitments and demographics 
and urbanisation, a whole range of 
things… It is an interesting time to be in 
banking,” he says with a laugh. The 53 
year old should know, given that he was 
once a key member of the Australian 
Securities and Investments Commission, 
responsible for enforcement. 
The way that Mr. Longo sees it, how 
the universal banking model changes 
following the crisis will dictate the 
future of banking. For instance, a key 
discussion has been whether retail 
banking activity should be separated 
from trading and investment banking 
activity. 
“It’s a Glass-Steagall-type discussion,” 
he continues, referring to the US 
Banking Act of 1933, which separated 
commercial and investment banking 
components. It was passed during the 
Great Depression in the 1930s. Sections 
of it were repealed in 1999 partly to</div> 
    </div> 
<div class="right"> 
    <div class="red" >allow for the merger of retail banks 
and investment banks that engage in 
underwriting and dealing in securities 
as banking operations. 
“Some people argue that if we want to 
protect the public purse, we need to get 
so called ‘ risky’ investment banking 
activity away from deposit-taking 
activity that is seen as a public good. 
That doesn’t seem to be happening in 
the US, while that is happening in the 
UK, with continued questioning in the 
rest of Europe, generally, about whether 
to do that.” 
Before and after the GFC 
The main difference before and after the 
crisis, says Mr. Longo, is growth. 
“Everybody was growing, hiring, legal 
departments were growing,” he recalls. 
“Since the crisis, there have been 
enormous changes in how we think 
about (things like) headcount, 
resources, cost efficiency , adapting to 
a new environment… Managing in that 
environment is different from managing 
in an environment where there is lots of 
growth, hiring, and all of that.” 
For instance, while he used to spend 
more time on banking transactions in 
the early days after joining Deutsche 
Bank in 2002, Mr. Longo now often 
finds himself dealing with managing a 
range of regulatory issues and strategy . 
Lawyers thinking of going in-house in a 
bank now can also expect to deal with 
a huge increase in regulatory work “to 
develop responses to, and implement, 
the immense amount of new global 
bank and financial institution reforms”, 
he says. These include “responding to 
Dodd-Frank (Act) and Volcker (Rules) 
from the US, the European Market 
Infrastructure Regulation (EMIR), Living 
Wills and Resolution plans, and the OTC 
(over-the-counter) derivative reforms 
and central clearing initiatives”.</div> 
</div> 
</div> 

</body> 
</html> 

感谢

+0

副本http://jsfiddle.net/ – Roar

+0

嗨@Roar,感谢响应。我已经在我的问题中提供了小提琴链接,你可以在这里找到[jsfiddle](http://jsfiddle.net/FPWea/) – user2423959

回答

1

看看这个fiddle,让我知道,如果这是你想要的。

我已经做了以下修改:

  1. 在你的CSS左部的宽度比什么为白色和灰色的div设置之和的情况,这是使得灰色格包(这是低于)。这让你的文字重叠。请记住内部div的宽度总和必须小于容器div的宽度,以便正确显示它们。
  2. 对于您的情况,我们可以通过使用display: inline-block;规则本身来拆分它们,因此我避免了float规则设置。如果你想坚持浮动,你可以检查这个version
  3. 举例来说,我已经将高度设置舍入为最接近的整数。您可以根据需要进行修改。

    div.columns { 
        width: 670px; 
        height:710px; 
    } 
    div.left { 
        width:440px; 
        height:710px; 
        border-right:dotted; 
        display: inline-block; 
    } 
    div.right { 
        width:210px; 
        height:710px; 
        display: inline-block; 
        margin-left: 10px; 
    } 
    div.white { 
        width:215px; 
        height:100%; 
        border-right:dotted; 
        display: inline-block; 
        vertical-align: top; 
    } 
    div.grey { 
        width:215px; 
        height:100%; 
        display: inline-block; 
    } 
    .image { 
        height: 390px; 
        width: 100%; 
    } 
    
+0

嗨@哈利谢谢你的解决方案,这是我正在寻找,但如果你看到通过向下滚动来显示虚线边框,它只显示一半,一个以上的文字限制,还可以将图像宽度稍微扩大一点,这样,跨度就会在第二条虚线之前的一厘米处完全结束。再次感谢 – user2423959

+0

@ user2423959啊边界,这是使用div指定边界的问题,如果div的高度发生变化,它们也会发生变化(小/更多)。我已经在这个[** fiddle **](http://jsfiddle.net/hari_shanx/FPWea/8/)中通过分配最小高度来解决这个问题。对于图像,您可以在小提琴中看到我更改了图像分区以符合您的需求,但我不建议增加图像的宽度,因为这可能会导致有时出现拉伸的外观。这段代码会将它放在中间。如果您还有其他问题,请告诉我。否则,请考虑接受答案;) – Harry

+0

非常感谢@哈里。现在好了。再次感谢。 – user2423959