Question

这是我目前的代码：

img{ width:100%;}
#g1{ width:100px;}
#g2{ width:500px;}


#g1{ width:20%;}
#g2{ width:80%;}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<div align="center">
<div style="width:75%;" align="left">
	
    <div style="width:100%;"><b><font size="+2" style="word-break:break-all; line-height:40px;"> Title</font></b></div>
	
    <div style="display:table-row;width:100%;">
        <div style="width:60%; display:table-cell; background-color:#996;">
            <table>
                <tr>
                    <td id="g1"><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></td>
                    <td id="g2" rowspan="5"><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif" style="width:100%"></td>
                </tr>
                <tr>
                    <td id="g1"><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></td>
                </tr>
                <tr>
                    <td id="g1"><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></td>
                </tr>
                <tr>
                    <td id="g1"><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></td>
                </tr>
                <tr>
                    <td id="g1"><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></td>
                </tr>
        	</table>
        </div>
        <div style="width:40%; display:table-cell; background-color:#F96;">
        	<p>text Here</p>
<div style="width:100%;">
        choose : <input name="" type="text" />
        
        </div>
        </div>
    </div>
    
    
    
</div>
</div>

</body>
</html>

hv无论如何要设置div顶部的文本？不在一半或底部。有这种设计的建议代码吗？

那样............................................. .................................................. .................................................. .........

Answer 1

我会使用flex而不是table来显示。改变这些：

<div style="display:flex;width:100%;">
...
<div style="width:40%; background-color:#F96;">

img{ width:100%;}
#g1{ width:100px;}
#g2{ width:500px;}


#g1{ width:20%;}
#g2{ width:80%;}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<div align="center">
<div style="width:75%;" align="left">
	
    <div style="width:100%;"><b><font size="+2" style="word-break:break-all; line-height:40px;"> Title</font></b></div>
	
    <div style="display:flex;width:100%;">
        <div style="width:60%; background-color:#996;">
            <table>
                <tr>
                    <td id="g1"><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></td>
                    <td id="g2" rowspan="5"><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif" style="width:100%"></td>
                </tr>
                <tr>
                    <td id="g1"><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></td>
                </tr>
                <tr>
                    <td id="g1"><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></td>
                </tr>
                <tr>
                    <td id="g1"><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></td>
                </tr>
                <tr>
                    <td id="g1"><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></td>
                </tr>
        	</table>
        </div>
        <div style="width:40%; background-color:#F96;">
        	<p>text Here</p>
<div style="width:100%;">
        choose : <input name="" type="text" />
        
        </div>
        </div>
    </div>
    
    
    
</div>
</div>

</body>
</html>

Answer 2

这样做

<p id="p1">text Here</p>
<div style="width:100%;">

#p1{margin-top:0em;}

Answer 3

要回答您的问题，您可以使用vertical-align属性更改表格内文本的垂直对齐方式。在您的代码中，只需将vertical-align: top;添加到div的样式中，如下所示：

<div style="width:40%; display:table-cell; background-color:#F96; vertical-align: top;">
  <p>text Here</p>
   <div style="width:100%;">
     choose : <input name="" type="text" />
   </div>
</div>

话虽如此，有一种正确的方法可以实现您想要做的事情（我假设您可以从头开始构建代码）：

首先，如果可以的话，将所有样式放在样式表中，以分离您的结构和样式。
然后，如果浏览器支持允许，最简单的方法是使用flexbox。

这是你的代码清理，我让你玩它来了解一切是如何工作的：

.wrapper {
  width: 75%;
  /* This will align your content to the center of the page */
  margin-left: auto;
  margin-right: auto;
}

.container {
  background-color: #996;
  display: flex;
  align-items: center;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 12%; /* in your code it was 20% of 60% */
  flex: 1 1 auto;
}

li + li {
  /* if you want spacing between image you can define it here */
  margin-top: 10px;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

.featured {
  padding-left: 10px;
  padding-right: 10px;
  width: 48%; /* in your code it was 80% of 60% */
  flex: 1 1 auto;
}

.featured img {
  margin-top: auto;
  margin-bottom: auto;
}

.text {
  background-color: #f96;
  padding-left: 10px;
  padding-right: 10px;
  width: 40%;
  width: 48%; /* in your code it was 80% of 60% */
  flex: 1 1 auto;
  align-self: stretch;
}

<div class="wrapper">
  <h1> Title</h1>
  <div class="container">
    <ul>
      <li><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></li>
      <li><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></li>
      <li><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></li>
      <li><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></li>
      <li><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></li>
    </ul>
    <div class="featured">
      <img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif">
    </div>
    <div class="text">
      <p>Some text here...</p>
      <p>
        Choose : <input name="" type="text" />
      </p>
    </div>
  </div>
</div>

无论如何设置文本从1行开始？

3 个答案: