我有下面的 html 代码，其中 div 作为列创建者和分隔符，当我在我的网络浏览器中运行它时，它会创建数据重叠或列没有正确对齐。这里实际上我想要一个 3 列布局，其中第一列和第二列顶部会有一个图像。你可以找到文档它应该是什么样子here和 fiddle Here .而且我不想在这里使用表格，只是 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>
谢谢
最佳答案
看看这个 fiddle如果这就是您想要的，请告诉我。
我做了以下修改:
- 在您的 CSS 中，左侧部分的宽度小于为白色和灰色 div 设置的总和，这使得灰色 div 环绕(位于下方)。这使您的文字重叠。请记住，内部 div 的宽度之和必须小于容器 div 的宽度之和才能正确显示。
- 对于您的情况，我们可以仅通过使用
display: inline-block;规则本身来拆分它们，因此我避免了float规则设置。如果你想坚持使用 float ，你可以检查这个 version . 例如，我已将高度设置四舍五入为最接近的整数。您可以根据需要修改它。
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%; }
关于css - div 和图像的对齐问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18074867/