Question

我试图用图像制作一个div。此图片周围有<a>标记。

现在它应该只使图像可以点击，而是使整个div可以点击，并且图像旁边的H4被推到div下面。 <a>取整个div的宽度。

我在div类中使用bootstrap col。

我该如何解决这个问题？我尝试给<a>一个宽度，但这不起作用......

提前致谢！

<header>
    <div class="image col-sm-8">
        <a href="home.php"><img class="img-responsive" src="Images/pc4u.png" style="height: 100px; width: 175px;"></a>
        <h4>PC4U voor al uw computers, onderdelen en software!</h4>
    </div>
    <div class="userInformationAndShoppingCart col-sm-4">
        <h4>Middle</h4>
    </div>
</header>

Answer 1

如果你想并排显示<H>和img，然后使用h4，默认情况下

disply:inline-block代码的宽度也会达到100％，如下所示：

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<header>
    <div class="col-sm-8">
        <a href="home.php"><img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/en/3/30/Java_programming_language_logo.svg" style="height: 100px; width: 175px;display:inline-block"></a>
        <h4 style="display:inline-block">PC4U voor al uw computers, onderdelen en software!</h4>
    </div>
    <div class="userInformationAndShoppingCart col-sm-4">
        <h4>Middle</h4>
    </div>
</header>

Answer 2

你可以这样做。

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header>
    <div class="image col-sm-8">
        <div class="col-sm-4">
         <a href="home.php"><img class="img-responsive" src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg" style="height: 100px; width: 175px;"></a>
        </div>
        <div class="col-sm-6">
         <h4>PC4U voor al uw computers, onderdelen en software!</h4>
        </div>
       
    </div>
    <div class="userInformationAndShoppingCart col-sm-4">
        <h4>Middle</h4>
    </div>
</header>

＆＃13;

Answer 3

使用宽度：100％; 您的图片

<header>
    <div class="image col-sm-8">
        <a href="home.php"><img class="img-responsive" src="https://www.w3schools.com/css/img_fjords.jpg" style=""></a>
        <h4>PC4U voor al uw computers, onderdelen en software!</h4>
    </div>
    <div class="userInformationAndShoppingCart col-sm-4">
        <h4>Middle</h4>
    </div>
</header>

public login(username: string, password: string): Observable<{}> {

const requestParam = {
  username: username,
  password: password,
  email: 'email@at.pt'
};

const options = this.generateOptions();

const body = JSON.stringify(requestParam);
return this.http
    .post(AuthService.SIGNIN_URL, body, options)
    .map(this.extractData)
    .catch(this.handleError);
}

Answer 4

使用style =＆＃34; display：inline＆＃34;在里面＆lt; a＆gt; tag，适用于bootstrap-4

＆＃13;

<div class="col-sm-8">
        <a style="display:inline-block;" href="home.php"><img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/en/3/30/Java_programming_language_logo.svg"></a>
        <h4>PC4U voor al uw computers, onderdelen en software!</h4>
    </div>

＆＃13;

img链接使整个bootstrap div可点击

4 个答案: