Question

我是HTML / CSS的新手，因此没有任何好处（尚未）。作为一项学校作业，我正在建立一个网站。我的布局将是页面顶部的标题，它位于固定位置，因此它会随您滚动。在标题下，它将是一些空格，然后是灰色背景上的四个白色框，其中每个框将包含一个图像和一段文本。我的问题是让图像和文本彼此水平内联，例如左侧的文字和右侧的图片。

＆＃13;

body {
    font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    margin-left: 50px;
}
#container {
    width: 100%;
    background-color: #29B1B1;
    position:fixed;
    top:0;
    left:0;
    margin: auto;
}
.top-ribbon-outer {
    width: 100%;
    background-color:#29B1B1;
    color: white;
    position: fixed;
    top:0;
    left:0;
    margin:auto;
}
.top-ribbon-inner {
    overflow: hidden;
}
h1 {
    margin: 0;
    float: left;
    padding: 5px;
}
nav {
    float: right;
}
li {
    float: left;
    padding-left: 15px;
    padding-right: 15px;
}
ul {
    list-style-type: none;
}
#logo {
    font-family:"Oswald";
    color: white;
    font-size:32px;
}
Body {
    background-color: #f0f0f0;
    font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    margin-left: 50px;
}
#innhold {
    display: table
}
#innhold img {
    margin: 3px;
    width: 35%;
}
#topboks {
    background-color: white;
    margin-top: 3em;
    width: 74%;
    margin-left: 13%;
    margin-right: 13%;
}
.boks {
    background-color: white;
    width: 74%;
    margin-left: 13%;
    margin-right: 13%
}
#kontakt {
}

＆＃13;

<div class="container">
    <div class="top-ribbon-outer">
        <div class="top-ribbon-inner">
             <h1>first last</h1>

            <nav>
                <ul>
                    <li>item1</li>
                    <li>item2</li>
                    <li>item3</li>
                    <li>item4</li>
                </ul>
            </nav>
        </div>
    </div>
</div>
<div id="innhold">
    <div id="boks1">
        <div id="topboks"> <span>Lorem dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span>

            <img src="app.jpg" alt="app-interface" />
        </div>
    </div>
    <div class="boks">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        <img src="" alt="" />
    </div>
    <div class="boks">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        <img src="" alt="" />
    </div>
    <div class="boks">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        <img src="" alt="" />
    </div>
    <div id="kontakt">
        <!-- will be a footer with contact information etc.-->
    </div>
</div>

＆＃13;

Answer 1

您的文字是SPAN而不是图片。将每个图像包裹在SPAN中，就像文本已经存在一样。确保包装DIV的宽度设置得足够宽，以适应两个跨度。

<div class="row" width=100%>
<span class="picture">photo here</span>
<span class="article">text here</span>
</div>

每一行由一面的图片和另一面的文字组成，是DIV。

在DIV中，您可以添加两个SPANS - 图片的一个跨度，文本的一个跨度。

然后你可以调整每个范围和div的PADDING，控制每个范围的背景颜色以获得你想要的边框。

Answer 2

希望这会对你有帮助......

HTML代码： -

body {
    font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    margin-left: 50px;
}
#container {
    width: 100%;
    background-color: #29B1B1;
    position:fixed;
    top:0;
    left:0;
    margin: auto;
}
.top-ribbon-outer {
    width: 100%;
    background-color:#29B1B1;
    color: white;
    position: fixed;
    top:0;
    left:0;
    margin:auto;
}
.top-ribbon-inner {
    overflow: hidden;
}
h1 {
    margin: 0;
    float: left;
    padding: 5px;
}
nav {
    float: right;
}
li {
    float: left;
    padding-left: 15px;
    padding-right: 15px;
}
ul {
    list-style-type: none;
}
#logo {
    font-family:"Oswald";
    color: white;
    font-size:32px;
}
Body {
    background-color: #f0f0f0;
    font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    margin-left: 50px;
}
.innhold {
    display: table;
    margin-top:50px;
    background-color: white;
}

img {
    margin: 3px;
    width: 35%;
    float:right;
    padding:10px;
    margin: -257px 13px 0 0;
}
p{
    text-align: justify;
    width: 309px;
    padding: 3px;
    margin-right: 10px;
}
 .topboks {
    background-color: white;
    margin-top: 3em;
    width: 74%;
    margin: 10px;
    padding: 10px;
}
.boks {
    background-color: white;
    width: 74%;
    margin: 10px;
    padding: 10px;
}
.wrapper {
    margin-top:50px;
    margin-bottom:50px;
}

CSS代码： -

QProcess proc;
args.pop_front();
args.push_front(subtestId);
args.push_front("-subtest");

proc.setStandardOutputFile(fileNameTestXml);
proc.start("sportSystemTest.exe", args);
return proc.waitForFinished(30000);

见--- JsFiddle

如何在白框内垂直显示文本和图片？

2 个答案: