2013-08-06 108 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