Question

我正在尝试将图像向右对齐，将文本对齐到左侧。它可以工作，但它没有响应最小宽度。

请注意，如果我将图像/ div放在左边而不是min-width工作并将文本保持在一起。我在两种情况下都使用相同的代码：左右浮动。

@NonNull
@Override
public View getView(final int position, View convertView, ViewGroup parent) {
    View v = convertView;
    try {
        if (v == null) {
            LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            v = inflater.inflate(resource, parent, false);

            holder = new CellHolder();
            holder.imageView = v.findViewById(R.id.imageView);
            holder.textViewTitle =  v.findViewById(R.id.textViewName);
            holder.textViewAddress =  v.findViewById(R.id.textViewDetail);
            holder.textViewPrice = v.findViewById(R.id.textViewDetail1);

            convertView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    String hotelTit = hotelTitle[position];
                    String hotelDescription1 = hotelDescription[position];
                    Integer imgPath = hotelsPics[position];
                    String hotelAdd = hotelAddress[position];

                    Bundle extras = new Bundle();
                    extras.putString("hotelTit",hotelTit);
                    extras.putString("hotelDescr",hotelDescription1);
                    extras.putInt("hotelImg", imgPath);
                    extras.putString("hotelAdd", hotelAdd);

                    Context context = PhotoListActivity.this;
                    Intent intent = new Intent(context, BookHotel.class);
                    ActivityOptions options = ActivityOptions.makeCustomAnimation(context, android.R.anim.fade_in, android.R.anim.fade_out);
                    intent.putExtras(extras);
                    context.startActivity(intent, options.toBundle());
                }
            });

            v.setTag(holder);
        } else {
            holder = (CellHolder)v.getTag();
        }

        // You can set the data here
        setData(id,holder);

    } catch (Exception e) {
        e.printStackTrace();
        e.getCause();
    }

    return v;
}

CSS

<h2>Image on the left</h2>
<div class="leftImage">
  <div class="image"></div>
</div>
<div id="wrap">
  <div class="textRight">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam rutrum purus a diam congue, facilisis                   interdum nunc dictum. In quis felis non libero dignissim hendrerit. Curabitur at iaculis massa. </p>
  </div>
</div>
<h2> Image to the right</h2>
<div class="rightImage">
  <div class="image"></div>
</div>
<div id="wrap">
  <div class="textLeft">
     <p>Loremmm ipsum dolor sit amet, consectetur adipiscing elit. Nullam rutrum purus a diam congue, facilisis                 interdum nunc dictum. In quis felis non libero dignissim hendrerit. Curabitur at iaculis massa. </p>
  </div>
</div>

我知道如何为右边的div修复它吗？

提前致谢

Answer 1

如果您想要响应式img宽度，请使用 max-width：900px 和宽度：100％ 这里唯一的问题是你使用的是最小宽度，所以它不能小于900px;

HTML - 是相同的

        <h2>
          Imageto the right
        </h2>

        <div id="wrap">
          <div class="rightImage">
              <div class="image"></div>
          </div>
          <div class="textLeft">
            <p>Loremmm ipsum dolor sit amet, consectetur adipiscing elit. 
             Nullam rutrum purus a diam congue, facilisis interdum nunc 
             dictum. In quis felis non libero dignissim hendrerit. Curabitur 
             at iaculis massa. 
            </p>
          </div>
        </div>

CSS - 更改位于#wrap max-width：900px;

/* Carta/Menu */
 .image{
  width:300px;
  height:500px;
  background-color: blue;
}
 /*.leftImage{
    margin-top: 20px;
    float:left;
    width:300px;
    height: 500px;
} */
.rightImage{
    margin-top: 20px;
    float:right;
    width:300px;
    height: 500px;
    margin-left: 20px;
}
.textRight{
    background-color: blanchedalmond;
    height:150px;
    padding: 80px;
    padding-top: 60px;
    padding-bottom: 120px; 
    margin-left: 250px; 
}
.textLeft{
    background-color: blanchedalmond;
    height:150px;
    padding: 80px;
    padding-top: 60px;
    padding-bottom: 120px;
    margin-right: 250px; 

}
#wrap{
    margin-top: 160px;
    margin-bottom: 100px;
    width: 100%;
    min-height: 200px;
    max-width: 900px;
}

向右浮动不适用于最小宽度

1 个答案: