2013-08-06 2 views
0

div 작성자와 구분 기호로 div 코드를 사용했습니다. 웹 브라우저에서이 코드를 실행하면 데이터가 겹치거나 열이 올바르게 정렬되지 않습니다. 여기에 실제로 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

사본이 응답에 대한 감사를 – Roar

+0

안녕 @Roar을 http://jsfiddle.net/합니다. 내 질문에 바이올린 링크를 주셨습니다. 여기에서 찾을 수 있습니다. [jsfiddle] (http://jsfiddle.net/FPWea/) – user2423959

답변

1

체크 아웃이 fiddle이 당신이 원하는 경우 알려주세요.

    당신의 CSS에서
  1. 왼쪽 부분의 폭은 흰색과 회색 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

안녕하세요, 해리가 해결책을 알려 주셔서 감사합니다. 아래로 스크롤하여 점선 테두리, 하나만 다른 텍스트 제한보다 더 표시됩니다, 또한 이미지 넓이를 약간 확장 할 수 있도록, 스팬은 정확히 두 번째 점선 앞에 cm 종료됩니다 . 다시 감사합니다 – user2423959

+0

@ user2423959 div를 사용하여 테두리를 지정할 때 문제가되는 div, div의 높이가 변경된 경우 (작은/이상). 필자는 min height를 지정하여이 [** fiddle **] (http://jsfiddle.net/hari_shanx/FPWea/8/)에서이 문제를 해결했습니다. Image의 경우, 이미지 조정부를 사용자의 필요에 맞게 변경 한 바이올린에서 볼 수 있지만 이미지의 너비를 늘리는 것은 때로는 늘어나는 모습을 나타낼 수 있으므로 권장하지 않습니다. 이 코드는 중심에서 정렬됩니다. 더 궁금한 점이 있으면 알려주세요. 그렇지 않으면 답변을 수락하는 것을 고려하십시오;) – Harry

+0

대단히 감사합니다. @ 해리. 이젠 괜찮아. 다시 한번 감사드립니다. – user2423959