div和图像的对齐问题

Question

我有下面的html代码，其中divs是列的创建者和分隔符，在这里，当我在Web浏览器中运行它时，它正在创建数据重叠或列未正确对齐。 在这里，我实际上想要一个3列布局，其中在第一列和第二列的顶部会有一个图像。 你可以找到这个文件应该如何看起来像在这里和小提琴这里。 而且我也不想在这里使用表格，只是divs应该这样做。 请让我知道我要去哪里错了。

<!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>

谢谢

Answer 1

查看这个小提琴 ，让我知道这是否是您想要的。

我进行了以下更改：

在您的CSS中，左侧部分的宽度小于为白色和灰色div设置的值的总和，这使灰色div可以环绕（低于此值）。 这使您的文本重叠。 请记住，内部div的宽度总和必须小于容器div的宽度总和，以使其正确显示。
对于您的情况，我们可以只使用display: inline-block;来拆分它们display: inline-block; 规则本身，因此我避免使用float规则设置。 如果要坚持使用浮标，可以检查此版本。

例如，我已经将高度设置四舍五入为最接近的整数。 您可以根据需要进行修改。

  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%; }

div和图像的对齐问题

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-08-06 09:22:06

div和图像的对齐问题

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-08-06 09:22:06

解决方案1
1 已采纳 2013-08-06 09:22:06