Question

好的，我希望我的主页有如下图所示的结构

enter image description here

- 第一个信息块只是1＆＃34;文本行＆＃34;

- 第二块信息是＆＃34; Wellcome Text＆＃34; （这里有很多文字行）

- 第3个信息块是＆＃34; Note Text＆＃34; （这里有一些文字行）

- 第四个信息块用于保存一些小部件，如按钮，图标......

所以，我决定使用Div。它适用于第一，第二和第二第四，但我不知道如何定位第三。

.aTextLine
{
    position:relative;
    left:500px;
    top:32px;
    text-align:right;
    width:420px;
}

.wellcomeText
{
    position:relative;
    left:200px;
    top:50px;
    text-align:left;
    width:720px;
}

.widgetSection
{
    position:relative;
    left:200px;
    top:60px;
    text-align:left;
    width:720px;
}

.noteText
{
    position:relative;
    left:230px;
    top:60px;
    text-align:left;
    width:100px;
}

如果我反对noteText，那么它看起来就像图片但没有注释部分，所以：

如何更改CSS .noteText，使其看起来像上面的图片

主页就像这样

    <html>
      <div class="{style.aTextLine}" > ...1 text line</div>
      <div class="{style.wellcomeText}"  > many text lines....
        .....
        ...</div>
      <div class="{style.widgetSection}" > <g:Button...> <img...> </div>
    </html>

Answer 1

请参阅您保留的.note文本左侧= 230px和100像素宽度，所以完全需要200 + 720 + 230 + 100px = 1250px这太多了。 Probabaly将它减少到这样的程度：

.welcomeText
{
    position: relative;
    float: left;
    left: 100px;
    top: 60px;
    text-align: left;
    width: 480px;
}

.noteText
{
    position: relative;
    float: right;
    left: 0px;
    top: 60px;
    text-align: left;
    width: 100px;
}

或者你可以将wellcome和note文本放在一个div中并使用百分比宽度;像这样的东西

section {
    width: 80%;
    height: 200px;
    background: aqua;
    margin: auto;
    padding: 10px;
}

div＃one { 宽度：75％; 身高：200px; 背景：红色; 向左飘浮; }

div#two {
    margin-left: 15%;
    height: 200px;
    background: black;
}

对于html

<section>
<div class="one">
<div>1</div>
<div>2</div>
<div>4</div>
</div>
<div class="two">
</div>
</section>

你可以这样做，也许1,2,4在一列，然后注意休息..所以那些列将有75％和你注意第3 div将有25％的其余

Answer 2

Check this

我假设你的html是在文件中设计的。所以只修改了几个css。如果你只想要这个设计，我可以用最好的方式覆盖整个代码。

.div1
{
 position:relative;
 left: 100px;
 text-align: right;
 top:32px;
 width:420px;
 border: 1px solid;
}

.div2
{
   position:relative;
   left:80px;
 top:50px;
 text-align:left;
 width:500px;
 border: 1px solid;
 height: 100px;
 float: left;

}

.div3
{   
 position:absolute;
 width:100px; 
 left: 600px;
 top: 80px;
 border: 1px solid;
 height: 100px;
}

.div4
{
  position:relative;
 left:80px;
 top:60px;
 text-align:left;
 width:500px;
 clear: both;
 border: 1px solid;
 }

如果出现任何问题或需求发生变化，请与我们联系。我会编辑它。

EDITED FIDDLE 它不会造成任何问题..

Answer 3

要为WELCOME和NOTE div创建WHOLE div，然后拆分两个单独的div并使用float:left float:right

像这样DEMO

HTML

<div class="main">
<div class="header">1 text line</div>
<div class="container">
    <div class="welcome">The 2nd block of info is the "Wellcome Text" (there're many text lines in here)......</div>
    <div class="note">Note Text"</div>
</div>
<div class="widget">4th block of info is for holding a few widgets such as buttons, icon.</div>

CSS

.main{
width: 1300px;
margin: 0px auto;
}
.header{
width: 100%;
height: 50px;
background-color: #ffff00;
text-align: center;
font-size: 2em;
}
.container{
width: 100%;
height: 500px;
}
.welcome{
width: 75%;
height: 100%;
float: left;
background-color: #d3d3d3;
}
.note{
width: 25%;
height: 100%;
float: right;
background-color: #87cefa;
}
.widget{
width: 100%;
height: 75px;
background-color: #0cbadf;
}

如何使用CSS在主页中设置4个Info块？

3 个答案: