Question

我需要表格部分在图像中对齐，但是我正在使用引导程序container，col-md-4，并且在使用移动设备时我还需要お知らせ在顶部。

HTML：

   <div class="container padding" id="temp">
            <div class="row text-center padding">
                <div class="col-md-4">
                    <img src="sbpage/img/img1.png">
                    <div class="txt">
                        <h3>かっこよく<br>
                            しっかり稼げる</h3>
                        <h4>
                            マグロなど一匹あたり約１～２万円で<br>
                            売れるので月収100万円も夢ではあ<br>
                            りません。目指せ年収1000万円！
                        </h4>
                    </div>
                </div>
                <div class="col-md-4">
                    <img src="sbpage/img/img2.png">
                    <div class="txt">
                        <h3>大物釣って<br>
                            家族に自慢！</h3>
                        <h4>
                            自慢できる仕事ってそうそうあるもの<br>
                            ではない、がここにはある！うちの父<br>
                            ちゃんりょうマンやき！そんな声が聞こ<br>
                            えてきそう。
                        </h4>
                    </div>
                </div>
                <div class="col-md-4">
                    <img src="sbpage/img/img3.png"> 
                    <div class="txt">
                        <h3>漁師になるなら<br>
                            土佐が一番！</h3>
                        <h4>
                            日本を代表する漁場といえば、何とい<br>
                            っても言わずと知れた南国土佐。釣っ<br>
                            た魚はおそらくどこにも負けない旨さ<br>
                            のものばかり！土佐の高知は日本一<br>
                            魚がうまい所なのです。
                        </h4>
                    </div>
                </div>
            </div>
        </div>

CSS：

#temp h3{
    color: #1D2087;
    font-size: 33px;
    margin-top: 55px;
    font-weight: bold;
}

#temp .txt h4{
    color: #1D2087;
    font-size: 15px;
    padding: 1% 0 0 12%;
    font-weight: bold;
    text-align: left;
}

#info{
    background-color: #1D2087;
    font-size: 19px;
    color: white;
    padding: 35px 1% 3% 25px;
    margin-top: 55px;
}

.no1 {
    font-weight: bold;
}

#info tr a{
    color: white;
    padding-left: 25px;
    float: left;
}

#info tr td a:hover{
    color: #ffff00;
}

Alignment

News table

Answer 1

请注意，我使页脚if(user detected using Firefox) function1() if(user detected using Chrome) function2() if(user detected using IE) function3() .....的标题在较小的屏幕上从左对齐到居中。图像还具有响应性，因此它们不会在较小的屏幕上重叠。图像与#info边框对齐。这是您的更新代码：{{3}}

#info

#temp h3 {
  color: #1D2087;
  font-size: 33px;
  margin-top: 55px;
  font-weight: bold;
}

#temp .txt h4 {
  color: #1D2087;
  font-size: 15px;
  padding: 1% 0 0 12%;
  font-weight: bold;
  text-align: left;
}

#info {
  background-color: #1D2087;
  font-size: 19px;
  color: white;
  padding: 35px 1% 3% 25px;
  margin-top: 55px;
}

.no1 {
  font-weight: bold;
}

#info a {
  color: white;
  padding-left: 25px;
  float: left;
  text-decoration: underline;
}

#info a:hover {
  color: #ffff00;
  text-decoration: none;
}

#info .txt {
  height: 2em;
}

.headin {
  text-align: center
}

それが役立つことを愿います

平和

Answer 2

我不确定您到底在寻找什么。但是据我了解，将容器内的图像宽度设置为100％可以解决对齐问题。

.col-md-4 img{
    width: 100%;
}

要回答第二个问题（新闻表格），您需要在标记中显示新闻表格，以便我为您提供解决方案。干杯！

Answer 3

希望这会对您有所帮助。我刚刚为<img>标签创建了类。

.img
{
     height: 30%;
    width: 100%;
}

它显示对齐的图像。

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<style>
#temp h3{
    color: #1D2087;
    font-size: 33px;
    margin-top: 55px;
    font-weight: bold;
}

#temp .txt h4{
    color: #1D2087;
    font-size: 15px;
    padding: 1% 0 0 12%;
    font-weight: bold;
    text-align: left;
}
.img
{
height: 30%;
    width: 100%;
}
#info{
    background-color: #1D2087;
    font-size: 19px;
    color: white;
    padding: 35px 1% 3% 25px;
    margin-top: 55px;
}

.no1 {
    font-weight: bold;
}

#info tr a{
    color: white;
    padding-left: 25px;
    float: left;
}

#info tr td a:hover{
    color: #ffff00;
}
</style>
</head>
<body>   
<div class="container padding" id="temp">
            <div class="row text-center padding">
                <div class="col-md-4">
                    <img class="img" src="https://i.stack.imgur.com/ac47X.png">
                    <div class="txt">
                        <h3>かっこよ<br>
                            しっかり稼げる</h3>
                        <h4>
                            マグロなど一匹あたり約１～２万円で<br>
                            売れるので月収100万円も夢ではあ<br>
                            りません。目指せ年収1000万円！
                        </h4>
                    </div>
                </div>
                <div class="col-md-4">
                    <img class="img" src="https://i.stack.imgur.com/ac47X.png">
                    <div class="txt">
                         <h3>大物釣って<br>
                            家族に自慢！</h3>
                        <h4>
                            自慢できる仕事ってそうそうあるもの<br>
                            ではない、がここにはある！うちの父<br>
                            ちゃんりょうマンやき！そんな声が聞こ<br>
                            えてきそう。
                        </h4>
                    </div>
                </div>
                <div class="col-md-4">
                    <img class="img" src="https://i.stack.imgur.com/ac47X.png"> 
                    <div class="txt">
                        <h3>漁師になるなら<br>
                            土佐が一番！</h3>
                        <h4>
                            日本を代表する漁場といえば、何とい<br>
                            っても言わずと知れた南国土佐。釣っ<br>
                            た魚はおそらくどこにも負けない旨さ<br>
                            のものばかり！土佐の高知は日本一<br>
                            魚がうまい所なのです。
                        </h4>
                    </div>
                </div>
            </div>
<!--div class="d-flex p-3"-->
<div class="row">
    <div class="col-sm-12" id="info">
      <div class="txt h5 text-xs-center text-sm-center headin" style="text-align:center;">
        <b>お知らせ</b>
      </div>
      <div class="container-fluid">
        <div class="row">
          <div>2019.1.20&nbsp;&nbsp;&nbsp;</div><a href="" class="col-10 text-left p-0">これはテストのための長いリンクです。</a>
        </div>
        <div class="row">
          <div>2019.1.21&nbsp;&nbsp;&nbsp;</div><a href="" class="col-10 text-left p-0">これもまた長いリンクです。</a>
        </div>
      </div>
    </div>
  </div>
        </div>
</body>
</html>

我使用了在线引导程序包。而不是使用您下载的软件包。因此，您可以避免未捕获的错误。

好运。

如何使用引导程序使表响应并与图像对齐

3 个答案: