Question

我正在移动我的代码以集成到网站中。但我似乎无法将我的内容放在我想要的特定位置，当我尝试绝对位置时，内容本身的格式化了而且我不知道如何继续。例如，我想把它转移到网站中间的某个地方。非常感谢帮助

<!DOCTYPE html>

<html>

<head>
    <title>News page</title>
    <style type="text/css">
        /* To align the articles left to right rather than up to down*/
    #newssection article{
            width: 275px;
            display: inline-block;
            *display: inline;
            zoom:1;
            vertical-align: top;
            margin: 0 38px 0 0;}
          /* To add background to the photos as well as resizing*/
       article > img {height:250px;
           width:250px;
       background: linear-gradient(to bottom, #68EACC 0%, #497BE8 100;%}

        /* To draw line above and below latest happening*/
        .line{
    width: 300px;
    height: 3px;
    background: url('newimg/line.png') repeat-x ;
    margin-bottom: 10px;}

        /* color when hovering read more*/
        .read:hover{
    background-color: #60EC10;}
    </style>

</head>

<body>

    <div>
        <div class="line"></div>
        <h1>Latest Happening</h1>
        <div class="line"></div>

    </div>

    <div id="newssection">
        <article>
    <h1>Foreign exchange was a success</h1>
    <img src="newimg/success.jpg" alt="" />
    <p>content</p>
    <a href="fullwidth.html" class="read">Read More</a>
    </article>

    <article>
    <h1>Congratulations to our winners</h1>
    <img src="newimg/winner.jpg" alt="" />
    <p>content</p>
    <a href="fullwidth.html" class="read">Read More</a>
    </article>

    <article class="lastarticle">
    <h1>Unknown bear species found in school grounds</h1>
    <img src="newimg/bear.jpg" alt="" />
    <p>content</p>
    <a href="fullwidth.html" class="read">Read More</a>
    </article>

    </div>

</body>

</html>

Answer 1

对于标题，请尝试

h1 { text-align: center; }

对于新闻报道

#newssection {
   width:1000px;
   margin:auto;
}

这将使新闻报道成为焦点。

Answer 2

您的css代码中发现了一些错误，修复了css错误，并添加了额外的div main-conatiner并添加了text-align:center

#newssection article{
width: 275px;
display: inline-block;
display: inline;
zoom:1;
vertical-align: top;
margin: 0 38px 0 0;}

article > img {height:250px;
width:250px;
background: linear-gradient(to bottom, #68EACC 0%, #497BE8 100);
}
.line{
width: 300px;
height: 3px;
background: url('newimg/line.png') repeat-x ;
margin-bottom: 10px;}


/* color when hovering read more*/
.read:hover{
background-color: #60EC10;}

.main-container
{
padding-left:100px;
padding-top:100px;
padding-right:100px;
padding-bottom:100px;}

<!DOCTYPE html>

<html>
<head>
    <title>News page</title>

</head>

<body>
<div class="main-container">
    <div>
        <div class="line"></div>
        <h1>Latest Happening</h1>
        <div class="line"></div>

    </div>

    <div id="newssection">
        <article>
    <h1>Foreign exchange was a success</h1>
    <img src="newimg/success.jpg" alt="" />
    <p>content</p>
    <a href="fullwidth.html" class="read">Read More</a>
    </article>

    <article>
    <h1>Congratulations to our winners</h1>
    <img src="newimg/winner.jpg" alt="" />
    <p>content</p>
    <a href="fullwidth.html" class="read">Read More</a>
    </article>

    <article class="lastarticle">
    <h1>Unknown bear species found in school grounds</h1>
    <img src="newimg/bear.jpg" alt="" />
    <p>content</p>
    <a href="fullwidth.html" class="read">Read More</a>
    </article>

    </div>
</div>
</body>

</html>

如何在html中移动和定位内容

2 个答案: